JavaScript/jQuery Chart - 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
$(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
<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 ], // ... })
Vue
<template> <DxChart ... @point-click="onPointClick" @point-hover-changed="onPointHoverChanged"> </DxChart> </template> <script> import DxChart from 'devextreme-vue/chart'; export default { components: { DxChart }, methods: { onPointClick (e) { const point = e.target; point.showTooltip(); }, onPointHoverChanged (e) { const point = e.target; if (!point.isHovered()) { point.hideTooltip(); } } } } </script>
React
import React from 'react'; import Chart from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... onPointClick={onPointClick} onPointHoverChanged={onPointHoverChanged}> </Chart> ); } } function onPointHoverChanged (e) { const point = e.target; if (!point.isHovered()) { point.hideTooltip(); } } function onPointClick (e) { const point = e.target; point.showTooltip(); } export default App;
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
$("#chartContainer").dxChart("hideTooltip");
Angular
import { ..., ViewChild } from "@angular/core"; import { DxChartModule, DxChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; // Prior to Angular 8 // @ViewChild(DxChartComponent) chart: DxChartComponent; hideTooltip () { this.chart.instance.hideTooltip(); }; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart ref="chart"> </DxChart> </template> <script> import DxChart from 'devextreme-vue/chart'; export default { components: { DxChart }, methods: { hideTooltip () { this.$refs.chart.instance.hideTooltip(); } } } </script>
React
import React from 'react'; import Chart from 'devextreme-react/chart'; class App extends React.Component { constructor(props) { super(props); this.chartRef = React.createRef(); this.hideTooltip = this.hideTooltip.bind(this); } render() { return ( <Chart ref={this.chartRef}></Chart> ); } get chart() { return this.chartRef.current.instance(); } hideTooltip () { this.chart.hideTooltip(); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.