Tooltip

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.
• 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 {}