Tooltip for the Gauge Pointer

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 an instance of TelerikTooltip ([Telerik UI for Blazor Tooltip])(/blazor-ui/components/tooltip/overview).
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.

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;
}