DevExtreme React - Overview
A tooltip is a small pop-up rectangle that displays information about a funnel item if it is pressed or the mouse pointer hovers over it. The information is the item's argument and value by default, but it is possible to display anything in a tooltip.
All options configuring tooltips are collected in the tooltip object. For example, to enable tooltips, assign true to this object's enabled option.
jQuery
$(function() { $("#funnelContainer").dxFunnel({ // ... tooltip: { enabled: true } }); });
Angular
<dx-funnel ... > <dxo-tooltip [enabled]="true"> </dxo-tooltip> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Options declared in the tooltip object apply to all tooltips in the Funnel. If you want to customize a specific tooltip, assign a function to the customizeTooltip option. This function must return an object with options for the tooltip you want to customize.
jQuery
$(function() { $("#funnelContainer").dxFunnel({ // ... tooltip: { enabled: true, color: 'yellow', // Tooltips of all items with the value more than 100 turn red // Other tooltips remain yellow customizeTooltip: function (itemInfo) { return itemInfo.value > 100 ? { color: 'red' } : { } } } }); });
Angular
<dx-funnel ... > <dxo-tooltip [enabled]="true" color="yellow" [customizeTooltip]="customizeTooltip"> </dxo-tooltip> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // Tooltips of all items with the value more than 100 turn red // Other tooltips remain yellow customizeTooltip (itemInfo) { return itemInfo.value > 100 ? { color: 'red' } : { } }; } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.