Tooltip

Source code

TypeScriptts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { TooltipPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

defineCustomElements();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  const { isDark } = currentTheme();

  grid.source = [
    { id: 1, name: 'John Doe', role: 'Admin', status: 'Active', lastLogin: '2024-03-15' },
    { id: 2, name: 'Jane Smith', role: 'User', status: 'Inactive', lastLogin: '2024-03-10' },
    { id: 3, name: 'Bob Johnson', role: 'Editor', status: 'Active', lastLogin: '2024-03-14' },
    { id: 4, name: 'Alice Brown', role: 'User', status: 'Active', lastLogin: '2024-03-13' },
    { id: 5, name: 'Charlie Davis', role: 'Admin', status: 'Inactive', lastLogin: '2024-03-12' },
  ];
  
  grid.columns = [
    { 
      name: 'Name', 
      prop: 'name',
      cellTemplate: (createElement, props) => {
        return createElement('div', {
          'data-tooltip': `User ID: ${props.model.id}\nFull Name: ${props.model.name}`,
          'tooltip-type': 'info',
        }, props.model.name);
      }
    },
  ];
  
  grid.plugins = [TooltipPlugin, ColumnStretchPlugin];
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.stretch = 'all';

  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vuevue

<template>
  <RevoGrid
    class="rounded-lg overflow-hidden cell-border"
    :columns="columns"
    :source="source"
    :plugins="plugins"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :additional-data="{
      stretch: 'all',
    }"
    hide-attribution
  />
</template>

<script setup lang="ts">
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
import { TooltipPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { ref } from 'vue';
import { useRandomData, currentThemeVue } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const source = ref(createRandomData(100));

const columns: ColumnRegular[] = [
  { 
    name: 'Name', 
    prop: 'name',
    cellTemplate: (createElement, props) => {
      return createElement('div', {
        'data-tooltip': `User ID: ${props.model.id}\nFull Name: ${props.model.name}`,
        'tooltip-type': 'info',
      }, props.model.name);
    }
  },
];

const plugins = [TooltipPlugin, ColumnStretchPlugin];
</script> 

Reacttsx

import React, { useMemo } from 'react';
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
import { TooltipPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

function Tooltip() {
  const source = createRandomData(100);

  const columns: ColumnRegular[] = useMemo(
    () => [
      { 
        name: 'Name', 
        prop: 'name',
        cellTemplate: (createElement, props) => {
          return createElement('div', {
            'data-tooltip': `User ID: ${props.model.id}\nFull Name: ${props.model.name}`,
            'tooltip-type': 'info',
          }, props.model.name);
        }
      },
    ],
    []
  );

  const plugins = [TooltipPlugin, ColumnStretchPlugin];

  return (
    <RevoGrid
      source={source}
      columns={columns}
      plugins={plugins}
      theme={isDark() ? 'darkMaterial' : 'material'}
      additionalData={{
        stretch: 'all',
      }}
      hideAttribution
    />
  );
}

export default Tooltip; 

Angularts

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { RevoGrid, type ColumnRegular } from '@revolist/angular-datagrid';
import { TooltipPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';

@Component({
  selector: 'tooltip-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      stretch="all"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class TooltipGridComponent implements OnInit {
  source = useRandomData().createRandomData(100);

  columns: ColumnRegular[] = [
    { 
      name: 'Name', 
      prop: 'name',
      cellTemplate: (createElement, props) => {
        return createElement('div', {
          'data-tooltip': `User ID: ${props.model.id}\nFull Name: ${props.model.name}`,
          'tooltip-type': 'info',
        }, props.model.name);
      }
    },
  ];

  plugins = [TooltipPlugin, ColumnStretchPlugin];
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

  ngOnInit() {
    // Any additional initialization logic
  }
} 

The Tooltip Plugin is a Pro plugin that displays additional information when users hover over grid cells or other elements inside the grid. It creates a single managed tooltip element, reads content from cell attributes, and shows it after a short hover delay.

Features

• Dynamic tooltip creation and positioning on mouseover, mouseout, and mousemove
• Automatic tooltip content from data-tooltip or title attributes
• Customizable tooltip appearance with tooltip-type and tooltip-position attributes
• Configurable show delay, animation, and cursor-following behavior
• Automatic mounting inside the active dialog/fullscreen container, with the document body as fallback
• Body fallback so grid and ancestor overflow containers cannot crop the tooltip
• Preserves the grid’s effective LTR or RTL writing direction across the portal boundary
• Smart positioning that follows grid UI beyond the host while keeping tooltips within viewport boundaries
• Smooth show/hide transitions
• Support for different tooltip types (info, warning, error, etc.)

Installation

The Tooltip Plugin is included in RevoGrid Pro. To use it, import and initialize it with your grid:

import { TooltipPlugin } from '@revolist/revogrid-pro';

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

Usage

Basic Usage

The simplest way to use tooltips is by adding a title or data-tooltip attribute to your grid cells:

grid.columns = [
  {
    prop: 'name',
    name: 'Name',
    cellTemplate: (createElement, props) => {
      return createElement('div', {
        title: 'User name',
        'data-tooltip': 'Full user name',
      }, props.model.name);
    },
  },
];

Showing Behavior

Tooltips are shown only when the hovered element has a non-empty data-tooltip or title attribute. If both are present, data-tooltip is used. The plugin waits 500ms before showing the tooltip by default, then hides it when the cursor leaves the tooltip target.

Use the tooltip grid property to control when and how the tooltip is shown:

grid.tooltip = {
  enabled: true,
  showDelayMs: 250,
  animation: true,
  followCursor: true,
  themeVariables: ['--app-tooltip-accent'],
  appendTo: document.getElementById('tooltip-root') ?? document.body,
};

Property	Default	Description
enabled	true	Enables or disables tooltip hover behavior. Disabling it hides any open tooltip immediately.
showDelayMs	500	Delay before showing the tooltip. Negative values are normalized to 0.
animation	true	Enables the tooltip entrance and exit transition.
followCursor	true	Keeps the tooltip attached to the cursor while it is open. Set to false to keep the tooltip at its opening position.
themeVariables	[]	Additional CSS custom properties copied from the grid to the portal-mounted tooltip.
appendTo	Automatic	Element that receives the managed tooltip node. Runtime changes move the existing tooltip to the new target.

Without appendTo, the plugin uses the closest open native dialog or active fullscreen element containing the grid, then falls back to document.body. This keeps the tooltip in the browser’s active top-layer subtree while the body fallback prevents overflow: hidden on the grid or its ancestors from cropping it. For a custom target, prefer a top-level overlay root without clipping or CSS transforms. A target inside an overflow-clipping container can crop the tooltip.

Plugins that own tooltip-specific theme variables can register them without mutating application configuration:

const unregister = tooltipPlugin.registerThemeVariables([
  '--my-plugin-tooltip-accent',
]);

// Call during plugin teardown.
unregister();

Customizing Tooltip

You can control the tooltip position using the tooltip-position attribute and the tooltip-type attribute to change the tooltip type:

createElement('div', {
  'data-tooltip': 'Custom positioned tooltip',
  'tooltip-position': 'right', // 'top', 'bottom', 'left', 'right'
  'tooltip-type': 'info', // 'info', 'warning', 'error', etc.
}, content);

Best Practices

1. Keep tooltip content concise and relevant
2. Use appropriate tooltip positions based on available space
3. Choose tooltip types that match the information context
4. Consider mobile users when designing tooltip interactions
5. Use tooltips to provide supplementary information, not critical data