DevExtreme Angular - Show and Hide a Tooltip

Each series point allows you to show or hide its tooltip programmatically. For this, call 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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        // Shows the tooltip only when a user clicks a series point
        onPointClick: function (e) {
            var point = e.target;
            point.showTooltip();
        },
        // Hides the tooltip once the user moves away from the series point
        onPointHoverChanged: function (e) {
            var point = e.target;
            if (!point.isHovered()) {
                point.hideTooltip();
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    (onPointClick)="onPointClick($event)"
    (onPointHoverChanged)="onPointHoverChanged($event)">
</dx-chart>
import { DxChartModule } 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 away from the series point
    onPointHoverChanged (e) {
        let point = e.target;
        if (!point.isHovered()) {
            point.hideTooltip();
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

You can also hide the tooltip regardless of the point to which it belongs. To do this, call the hideTooltip() method of the Chart instance.

jQuery
JavaScript
$("#chartContainer").dxChart("hideTooltip");
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxChartModule, DxChartComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxChartComponent) chart: DxChartComponent;
    hideTooltip () {
        this.chart.instance.hideTooltip();
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
See Also