Tooltip Plugin

Source code

TypeScript

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.additionalData = {
    stretch: 'all',
  };

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

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

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

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"
      [additionalData]="additionalData"
      [hideAttribution]="true"
      style="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';
  additionalData = {
    stretch: 'all',
  };

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

The Tooltip Plugin is a powerful addition to RevoGrid that provides interactive tooltip functionality for grid cells. This plugin enhances user experience by displaying additional information when hovering over cells, making it easier to view supplementary data without cluttering the grid interface.

Features

• Dynamic tooltip creation and positioning
• Automatic tooltip content from data-tooltip or title attributes
• Customizable tooltip appearance with tooltip-type and tooltip-position attributes
• 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 the core RevoGrid package. To use it, simply 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);
    },
  },
];

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