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

Tooltip for the Gauge Pointer


Product Arc Gauge for Blazor,
Circular Gauge for Blazor,
Linear Gauge for Blazor,
Radial Gauge 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.
  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