Skip to main content

Tooltip

Description​

Tooltip component for displaying cell data on hover

The Tooltip component wraps the Grid and shows a tooltip when the user hovers over a cell. It uses the Grid API to resolve the hovered row, then either renders the cell value as plain text or passes the row to a custom content component.

Usage​

<Tooltip {api} {content} {overflow} {at} {arrow} {touch} {delay} {resolver} {css}>
    <Grid ... bind:this={api} />
</Tooltip>

Import the component from @svar-ui/svelte-grid:

import { Grid, Tooltip } from "@svar-ui/svelte-grid";

Parameters​

  • api (object) - (required) the Grid API object (bind:this={api}). Used by the default resolver to look up the hovered row and column
  • content (Component) - (optional) a custom Svelte component rendered as the tooltip body. Receives data — an object with row (the hovered row) and column (the hovered column). When omitted, falls back to the column's rendered cell value as plain text
  • overflow (boolean) - (optional) when true, the tooltip is shown only if the anchor text is not fully visible. Default: false
  • at (string) - (optional) the tooltip placement. Possible values: "point" (default), "top", "bottom", "left", "right", "top-start", "top-center", "top-end", "bottom-start", "bottom-center", "bottom-end", "left-start", "left-center", "left-end", "right-start", "right-center", "right-end". See Core Tooltip API for details
  • arrow (boolean) - (optional) shows an arrow pointing to the target element. Default: false
  • touch (boolean) - (optional) enables tooltips on touch devices. When false (default), tooltips are not shown; when true, they appear on tap
  • delay (number) - (optional) delay in milliseconds before the tooltip appears. Default: 300. The tooltip disappears immediately when the cursor leaves
  • resolver (function) - (optional) a custom resolver function. The default resolver reads the hovered cell and passes { data: { row: IRow, column: IColumn } } to the content component
  • css (string) - (optional) a CSS class name to apply to the tooltip element

Example​

<script>
    import { getData } from "./common/data";
    import { Grid, Tooltip } from "@svar-ui/svelte-grid";
    import CustomTooltip from "./CustomTooltip.svelte";

    const { data, columns } = getData();

    let api = $state();
</script>

<Tooltip content={CustomTooltip} {api}>
    <Grid {data} {columns} bind:this={api} />
</Tooltip>

CustomTooltip.svelte — receives data with row and column:

CustomTooltip.svelte
<script>
    let { data } = $props();
    // data.row — the hovered row object
    // data.column — the hovered column object
</script>

<div class="data">
    <div><b>Name:</b> {data.row.firstName} {data.row.lastName}</div>
    <div><b>City:</b> {data.row.city || "Unknown"}</div>
    <div><b>Email:</b> {data.row.email}</div>
</div>

Related articles: