DevExtreme Angular - Show and Hide a Tooltip
Each series point allows you to show or hide its tooltip programmatically by calling the showTooltip() or hideTooltip() method of the Point object. You can access this object with the API methods or in the handlers of the point events, such as pointClick, pointHoverChanged, etc. The latter is demonstrated in the following code.
- <dx-pie-chart ...
- (onPointClick)="onPointClick($event)"
- (onPointHoverChanged)="onPointHoverChanged($event)">
- </dx-pie-chart>
- import { DxPieChartModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // Shows the tooltip only when a user clicks a series point
- onPointClick (e) {
- let point = e.target;
- point.showTooltip();
- },
- // Hides the tooltip once the user moves the pointer away from the series point
- onPointHoverChanged (e) {
- let point = e.target;
- if (!point.isHovered()) {
- point.hideTooltip();
- }
- }
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
You can also hide the tooltip regardless of the point to which it belongs by calling the hideTooltip() method of the PieChart instance.
- import { ..., ViewChild } from "@angular/core";
- import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular";
- // ...
- export class AppComponent {
- @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
- hideTooltip () {
- this.pieChart.instance.hideTooltip();
- };
- }
- @NgModule({
- imports: [
- // ...
- DxPieChartModule
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.