New to Telerik UI for Blazor? Download free 30-day trial

Tooltip for the Gauge Pointer


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


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.


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

        <ArcGaugePointer Color="#FFE162"

<TelerikTooltip TargetSelector="path[stroke='#FFE162']"
        <p>Value is: @GaugeValue</p>

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