Skip to content

Latest commit

 

History

History
66 lines (54 loc) · 1.87 KB

gauge-pointer-tooltip.md

File metadata and controls

66 lines (54 loc) · 1.87 KB
title description type page_title slug position tags ticketid res_type
Tooltip for the Gauge Pointer
How to show a Tooltip on hover of the Gauge Pointer?
how-to
Tooltip for the Gauge Pointer
gauge-kb-pointer-tooltip
gauge,tooltip,pointer,arc,circular,linear,radial
1535827
kb

Environment

Product ArcGauge for Blazor,
CircularGauge for Blazor,
LinearGauge for Blazor,
RadialGauge for Blazor

Description

How can I add a Tooltip to the Blazor Arc or Radial Gauge? I want to show a Tooltip when the user hovers over the pointer of the Radial Gauge or the Arc Gauge.

Solution

To add a Tooltip for the pointer of the Gauge:

  1. Set the Color of the Gauge Pointer.
  2. Declare TelerikTooltip component instance.
  3. Set the TargetSelector of the Tooltip to a specific path element within the SVG rendered by the Gauge. Use the specified pointer color in the selector.

The example below demonstrates how to add a Tooltip to the Arc Gauge. The same approach applies to all other Gauge types.

caption Tooltip in Arc Gauge

<TelerikArcGauge>
    <ArcGaugePointers>
        <ArcGaugePointer Color="#FFE162"
                         Value="@GaugeValue">
        </ArcGaugePointer>
    </ArcGaugePointers>
</TelerikArcGauge>

<TelerikTooltip TargetSelector="path[stroke='#FFE162']"
                Position="TooltipPosition.Top"
                ShowOn="@TooltipShowEvent.Hover"
                Id="first-pointer">
    <Template>
        <p>Value is: @GaugeValue</p>
    </Template>
</TelerikTooltip>

@code {
    private double GaugeValue { get; set; } = 40;
}