New to Kendo UI for Angular? Start a free 30-day trial

Adding Tooltips to Radial Gauge Pointers


ProductProgress® Kendo UI for Angular Gauges


How to display a tooltip when end users hover the Kendo UI for Angular Radial Gauge pointer?


To display a tooltip for the pointer of a Radial Gauge in Kendo UI for Angular, follow these steps:

  1. Wrap the Kendo UI Radial Gauge component in the kendoTooltip directive.

    <div kendoTooltip [tooltipTemplate]="template" filter="g path">
      <kendo-radialgauge [pointer]="{ value: value }" [scale]="{ max: 50 }"> 
  2. Set a custom template for the tooltip using the tooltipTemplate property.

    <ng-template #template let-anchor>
      <span>{{ value }}%</span>

The following example demonstrates the full implementation of the suggested approach.

{% meta height:350 %} {% embed_file gauge-adding-tooltip-for-radial-gauges-pointer/app.component.ts preview %} {% embed_file gauge-adding-tooltip-for-radial-gauges-pointer/app.module.ts %} {% embed_file shared/main.ts hidden %} {% endmeta %}

In this article

Not finding the help you need?