Adding Tooltips to Radial Gauge Pointers

Environment

Product

Progress® Kendo UI for Angular Gauges

Description

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

This knowledge base article also answers the following questions:

• How to add a tooltip to the pointer of a Radial Gauge in Kendo UI for Angular?
• How to customize the tooltip template for the pointer of a Radial Gauge in Kendo UI for Angular?
• How to show the value of the pointer in a tooltip in Kendo UI for Angular?

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.

   html

   <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.

   html

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

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

Change Theme

Theme

Loading ...

See Also

• Gauges Appearance and Styling
• RadialGauge Scale Options
• Conditionally Applying Label Colors
• Gauges API Reference