Tooltip Plugin

Source code

TypeScript ts

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';
  Object.assign(grid, {
    stretch: 'all',
  })

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

Vue vue

<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> 

React tsx

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; 

Angular ts

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
• Smart positioning to ensure tooltips remain within grid 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,
};

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.

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