blazor-docs/knowledge-base/gauge-pointer-tooltip.md

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]({%slug arc-gauge-pointers%}#color).
2. Declare an instance of TelerikTooltip ([Telerik UI for Blazor Tooltip])({%slug tooltip-overview%}).
3. Set the [TargetSelector]({%slug tooltip-overview%}#tooltip-parameters) 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;
}