Adding Tooltips to Radial Gauge Pointers

Environment

Description

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

Solution

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.

   Copy Code<div kendoTooltip [tooltipTemplate]="template" filter="g path">
     <kendo-radialgauge [pointer]="{ value: value }" [scale]="{ max: 50 }"> 
     </kendo-radialgauge>
   </div>

2. Set a custom template for the tooltip using the tooltipTemplate property.

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

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