DevExtreme Vue - Show and Hide a Tooltip
Each funnel item allows you to show its tooltip programmatically by calling the showTooltip() method of the Item object. You can access this object with the API methods or in item event handlers, such as onItemClick, onHoverChanged, etc. The latter is demonstrated in the following code. To hide the tooltip, call the hideTooltip() method of the widget's instance.
jQuery
JavaScript
$(function() { $("#funnelContainer").dxFunnel({ // ... // Shows the tooltip only when a user clicks a funnel item onItemClick: function (e) { e.item.showTooltip(); }, // Hides the tooltip once the user moves the pointer away from the funnel item onHoverChanged: function (e) { if (!e.item.isHovered()) { e.component.hideTooltip(); } } }); });
Angular
HTML
TypeScript
<dx-funnel ... (onItemClick)="onItemClick($event)" (onHoverChanged)="onHoverChanged($event)"> </dx-funnel>
import { DxFunnelModule } from 'devextreme-angular'; // ... export class AppComponent { // Shows the tooltip only when a user clicks a funnel item onItemClick (e) { e.item.showTooltip(); }, // Hides the tooltip once the user moves the pointer away from the funnel item onHoverChanged (e) { if (!e.item.isHovered()) { e.component.hideTooltip(); } } } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.