Essentials

Tooltips

Configure cell tooltips in NuGrid.

NuGrid provides built-in tooltip support for cells, showing content when hovering over cells with truncated text.

Enabling Tooltips

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: 2000,
      switchDelay: 500,
    }"
  />
</template>

Option	Type	Default	Description
`truncatedOnly`	`boolean`	`true`	Only show tooltips for truncated content
`showDelay`	`number`	`2000`	Initial delay before showing tooltip (when no tooltip was recently visible)
`switchDelay`	`number`	`500`	Delay when switching between cells (when a tooltip was recently visible)
`hideDelay`	`number`	`100`	Delay before hiding (prevents flicker when moving between cells)
`mouseFollow`	`boolean`	`false`	Tooltip follows mouse cursor

The switchDelay provides a better user experience when exploring data: the first tooltip takes 2 seconds to appear, but subsequent tooltips appear faster (500ms) as you move between cells.

Show All Tooltips

Show tooltips for all cells, not just truncated ones:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :tooltip="{
      truncatedOnly: false,
    }"
  />
</template>

Mouse Following Tooltips

Enable tooltips that follow the mouse cursor:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :tooltip="{
      mouseFollow: true,
    }"
  />
</template>

Custom Delays

Adjust tooltip timing for your use case:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :tooltip="{
      showDelay: 1000,   // Initial delay (1 second)
      switchDelay: 300,  // Faster switching between cells
      hideDelay: 200,    // Keep tooltip briefly when moving
    }"
  />
</template>

Disabling Tooltips

Disable tooltips entirely:

<template>
  <NuGrid
    :data="data"
    :columns="columns"
    :tooltip="false"
  />
</template>

Configure tooltips per column using column definition options:

Option	Type	Description
`tooltipField`	`string`	Show a different field's value as tooltip
`tooltipValue`	`(row: T) => string`	Custom function to generate tooltip content
`tooltipHeader`	`boolean`	Enable tooltip on the column header
`tooltipHeaderValue`	`() => string`	Custom function for header tooltip content

Using a Different Field

Show the full description when hovering over a truncated short description:

const columns = [
  {
    accessorKey: 'shortDescription',
    header: 'Description',
    tooltipField: 'fullDescription', // Shows fullDescription on hover
  },
]

Generate custom tooltip content with access to the full row data:

const columns = [
  {
    accessorKey: 'sku',
    header: 'SKU',
    tooltipValue: (row) => `SKU: ${row.sku}\nPrice: $${row.price.toFixed(2)}`,
  },
]

Header Tooltips

Add tooltips to column headers for additional context:

const columns = [
  {
    accessorKey: 'category',
    header: 'Cat.',
    tooltipHeader: true,
    tooltipHeaderValue: () => 'Product Category Classification',
  },
]

NuGrid tooltips include several built-in features:

Word wrapping: Long tooltip content automatically wraps with a maximum width of 320px
Multiline support: Use \n in tooltip content to create line breaks
Fade animation: Smooth fade in/out transitions
Smart positioning: Tooltips appear below the cursor, centered horizontally

How Truncation Detection Works

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:

Fixed column widths
Resizable columns
Auto-sized columns
Text wrapping disabled columns

Next Steps

Columns

Configure column sizing and behavior.

Focus & Navigation

Configure keyboard navigation.

Sorting, Filtering & Search

Sort, filter, and search data in NuGrid.

Cell Editing

Enable inline cell editing in NuGrid.