# Tooltip
URL: https://pro.rv-grid.com/guides/grid-utilities/tooltip/
Source: src/content/docs/guides/grid-utilities/tooltip.mdx
Description: A comprehensive guide to using the RevoGrid Tooltip Plugin
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:

```typescript
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:

```typescript
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:

```typescript
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:

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