Tooltip

Module Extensions

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  tooltip?: TooltipPluginConfig
}

Plugin API

TooltipPluginConfig

interface TooltipPluginConfig {
  /** Enables or disables all tooltip hover behavior. */
    enabled?: boolean;
  /** Delay before showing the tooltip. Defaults to TooltipPlugin.SHOW_DELAY_MS. */
    showDelayMs?: number;
  /** Enables the subtle tooltip entrance/exit animation. */
    animation?: boolean;
  /** Keeps the tooltip attached to the cursor while it is open. Defaults to true. */
    followCursor?: boolean
}

---

TooltipPlugin

The TooltipPlugin is a RevoGrid plugin that provides interactive tooltip functionality for grid cells, enhancing user experience by displaying additional information on hover. This plugin automatically creates and manages tooltips based on element attributes, allowing for seamless integration and customization.

Key Features:

• Dynamic tooltip creation and positioning triggered by mouse events (mouseover, mouseout, mousemove).
• Tooltip content sourced from data-tooltip or title attributes.
• Customizable tooltip appearance based on tooltip-type and tooltip-position attributes.
• Optional cursor-following or fixed-position behavior after opening.
• Ensures tooltips remain within grid boundaries for optimal display.

Usage:

• Instantiate the TooltipPlugin with a RevoGrid element and required providers.
• Ensure grid elements have data-tooltip or title attributes set for tooltip content.
• Optionally, use tooltip-type for styling variations and tooltip-position to specify position (‘top’, ‘bottom’, ‘left’, ‘right’).

Example

import { TooltipPlugin } from './tooltip-plugin';

const grid = document.createElement('revo-grid');
grid.plugins = [TooltipPlugin];

grid.columns = [
  {
    prop: 'num',
    name: 'Linear',
    cellTemplate: (createElement, props) => {
      return createElement('div', {
        title: 'Number value',
        'data-tooltip': 'This is a number',
        'tooltip-type': 'info',
        'tooltip-position': 'right',
      }, props.index);
    },
  },
];

This plugin is ideal for providing additional data insights directly within the grid interface, offering flexible tooltip management and presentation.

class TooltipPlugin {
  destroy(): void;
}