tooltip

Optional. Enables and configures tooltips for Tree items

Usage

tooltip?:
    | boolean
    | (item: ITreeItem, event: MouseEvent) => string
    | {
        template?: (item: ITreeItem, event: MouseEvent) => string;
        force?: boolean; // false by default
        showDelay?: number;
        hideDelay?: number;
        htmlEnable?: boolean;
        margin?: number; // 8 by default
        position?: "right" | "bottom" | "center" | "left" | "top"; // "bottom" by default
        css?: string;
    }

The property can have three types of values:

• boolean — if true, enables the standard tooltip (the value is taken from the value property of the item)
• function — a template function that returns the string content of the tooltip
• object — a configuration object for detailed customization of the tooltip's behavior and appearance. Check the available properties below

Parameters:

The properties of the tooltip configuration object are described below:

• template - (optional) a function that determines the content of the tooltip. It takes two arguments:
  • item - (object) the data object of a tree item.
  • event - (object) the native mouse event (MouseEvent). The template function must return a string.
• force - (optional) if true, forces the tooltip to appear without delays. In this case, the showDelay and hideDelay settings are ignored. The default value is false.
• showDelay - (optional) the delay before the tooltip appears (in milliseconds).
• hideDelay - (optional) the delay before the tooltip hides (in milliseconds).
• htmlEnable - (optional) specifies whether the use of the HTML markup inside the tooltip is allowed.
• margin - (optional) the margin between the tree item and the tooltip (in pixels). The default value is 8.
• position - (optional) the position of the tooltip relative to the item. The possible values are: "right", "bottom", "center", "left", "top". The default value is "bottom".
• css - (optional) the name of the CSS class for customizing the style of the tooltip container.

Examples

• using the tooltip configuration with a custom template and a display delay:

const tree = new dhx.Tree("tree_container", {
    tooltip: {
        htmlEnable: true,
        // the 500ms delay before showing
        showDelay: 500,
        // the tooltip will appear to the right of the item
        position: "right",
        // a CSS class for styling
        css: "custom-tooltip-style",
        // the template function
        template: (item, event) => {
            // display the item's name and the number of children (if any)
            const count = item.items ? ` (${item.items.length})` : "";
            return `<span className="tooltip-title">${item.value}</span><span className="tooltip-count">${count}</span>`;
        }
    }
});

• defining the content of tooltip via a function:

const tree = new dhx.Tree("tree_container", {
    tooltip: (item) =>
        (item.value + (item.items ? ` (${item.items?.length})` : "") + "")
});

Related sample: Tree. Tooltip template

Related article: Configuration

Change log:

Added in v9.3