DevExtreme Angular - Handle Tooltip Events
When a tooltip becomes shown or hidden, the PieChart fires the tooltipShown or tooltipHidden event that you can handle with a function. If the handling function is not going to be changed during the lifetime of the widget, assign it to the onTooltipShown or onTooltipHidden option respectively, when you configure the widget.
- <dx-pie-chart ...
- (onTooltipShown)="onTooltipShown($event)"
- (onTooltipHidden)="onTooltipHidden($event)">
- </dx-pie-chart>
- import { DxPieChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- onTooltipShown (e) {
- let point = e.target;
- // Handler of the "tooltipShown" event
- },
- onTooltipHidden (e) {
- let point = e.target;
- // Handler of the "tooltipHidden" event
- }
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
If you are going to change the event handlers at runtime or if you need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
- var tooltipShownHandler1 = function (e) {
- var point = e.target;
- // First handler of the "tooltipShown" event
- };
- var tooltipShownHandler2 = function (e) {
- var point = e.target;
- // Second handler of the "tooltipShown" event
- };
- $("#pieChartContainer").dxPieChart("instance")
- .on("tooltipShown", tooltipShownHandler1)
- .on("tooltipShown", tooltipShownHandler2);
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.