NuGrid provides built-in tooltip support for cells, showing content when hovering over cells with truncated text.
By default, NuGrid shows tooltips for cells with truncated content. Configure tooltip behavior with the tooltip prop:
<template>
<NuGrid
:data="data"
:columns="columns"
:tooltip="{
truncatedOnly: true,
showDelay: 500,
}"
/>
</template>
| Option | Type | Default | Description |
|---|---|---|---|
truncatedOnly | boolean | true | Only show tooltips for truncated content |
showDelay | number | 500 | Delay in milliseconds before showing |
hideDelay | number | 100 | Delay before hiding (prevents flicker) |
mouseFollow | boolean | false | Tooltip follows mouse cursor |
Show tooltips for all cells, not just truncated ones:
<template>
<NuGrid
:data="data"
:columns="columns"
:tooltip="{
truncatedOnly: false,
showDelay: 300,
}"
/>
</template>
Enable tooltips that follow the mouse cursor:
<template>
<NuGrid
:data="data"
:columns="columns"
:tooltip="{
mouseFollow: true,
showDelay: 200,
}"
/>
</template>
Adjust tooltip timing for your use case:
<template>
<NuGrid
:data="data"
:columns="columns"
:tooltip="{
showDelay: 1000, // Wait 1 second before showing
hideDelay: 200, // Keep tooltip briefly when moving between cells
}"
/>
</template>
Disable tooltips entirely:
<template>
<NuGrid
:data="data"
:columns="columns"
:tooltip="false"
/>
</template>
NuGrid automatically detects truncated content by comparing the cell's scrollWidth to its clientWidth. When content is cut off due to column width constraints, the tooltip appears on hover.
This works seamlessly with: