# Tooltips There is no built-in tooltip API on `ColumnDef`. Use the standard `title` attribute, an accessible `

`, or any popover library - wired through a custom cell renderer. > Live demo: Tooltips + per-cell notes - https://svgrid.com/demos/85-tooltips-and-notes/ ## With `title` (no JS, screen-reader friendly) ```ts { field: 'description', cell: (ctx) => renderSnippet(EllipsisCell, { value: String(ctx.getValue() ?? ''), }), } ``` ```svelte {#snippet EllipsisCell(p: { value: string })} {p.value} {/snippet} ``` `title` is the safest default: screen readers announce it; mouse users see a tooltip; keyboard users see it on focus (when wrapped in a focusable element). ## With a popover library Pass a component instead of a snippet: ```ts import TooltipCell from './TooltipCell.svelte' import { renderComponent } from '@svgrid/grid' { field: 'description', cell: (ctx) => renderComponent(TooltipCell, { value: String(ctx.getValue() ?? ''), tip: ctx.row.original.fullDescription, }), } ``` ## Header tooltips The same pattern, but via the `header:` field - see [Custom header components](https://svgrid.com/docs/help/columns/custom-header-components/). ## Gotchas - The grid's column-menu popover and the cell-edit overlay use top-layer z-indices around 100. Your tooltip should be either lower (so it slides under those overlays when both open) or higher with a click-outside dismissal. - A long tooltip inside an Excel-style filter dropdown can occlude the filter input. Detach the tooltip from cells inside an open filter menu. ## A tooltip from the row `tooltip` takes a string or a function. The function form gets the cell context, so the tip can say something the cell cannot fit - which is the only good reason to have one. ```svelte ``` ## Returning nothing Return `null` or `undefined` and no tooltip appears. That is how you give one only to the rows that need it, instead of training people to ignore them. ```svelte ``` ## See also - [Cell components](https://svgrid.com/docs/help/cells/cell-components/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/tooltips/ . All docs: https://svgrid.com/llms.txt