# Tooltip
URL: https://pro.rv-grid.com/api/tooltip/
Source: src/content/docs/api/tooltip.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `global`)

```ts
interface HTMLRevoGridElement {
  tooltip?: TooltipPluginConfig
}
```

## Plugin API

### `TooltipPluginConfig`

```ts
interface TooltipPluginConfig {
  /** Enables or disables all tooltip hover behavior. */
    enabled?: boolean;
  /** Delay before showing the tooltip. Defaults to TooltipPlugin.SHOW_DELAY_MS. */
    showDelayMs?: number;
  /** Enables the subtle tooltip entrance/exit animation. */
    animation?: boolean;
  /** Keeps the tooltip attached to the cursor while it is open. Defaults to true. */
    followCursor?: boolean
}
```

---

### `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.
- Optional cursor-following or fixed-position behavior after opening.
- 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
```typescript
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.

```ts
class TooltipPlugin {
  destroy(): void;
}
```
