Tooltip

Module Extensions

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  tooltip?: TooltipPluginConfig
}

Plugin API

TooltipThemeVariable

export type TooltipThemeVariable = `--${string}`;

---

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;
  /** Additional CSS custom properties copied from the grid to the portal-mounted tooltip. */
    themeVariables?: readonly TooltipThemeVariable[];
  /** Element that receives the managed tooltip node. Overrides automatic top-layer targeting. */
    appendTo?: HTMLElement
}

---

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.
• Automatic active dialog/fullscreen mounting keeps tooltips in the browser top layer.
• Body fallback prevents grid and ancestor overflow containers from clipping tooltips.
• Ensures tooltips remain within viewport boundaries, including for grid UI that overflows the grid.

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 {
  /**
     * Registers CSS custom properties owned by another plugin for portal theme copying.
     * The returned disposer removes only this registration.
     */
  registerThemeVariables(variables: readonly TooltipThemeVariable[]): () => void;

  destroy(): void;
}