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="api" :content="content" :overflow="overflow" :at="at" :arrow="arrow" :touch="touch" :delay="delay" :resolver="resolver" :css="css">
    <Grid ... ref="api" />
</Tooltip>

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

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

Parameters​

  • api (object) - (required) the Grid API object (ref="api"). Used by the default resolver to look up the hovered row and column
  • content (Component) - (optional) a custom Vue 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 setup>
    import { getData } from "./common/data";
    import { Grid, Tooltip } from "@svar-ui/vue-grid";
    import CustomTooltip from "./CustomTooltip.vue";

    const { data, columns } = getData();

    const api = ref(null);
</script>

<template>
    <Tooltip :content="CustomTooltip" :api="api">
        <Grid :data="data" :columns="columns" ref="api" />
    </Tooltip>
</template>

CustomTooltip.vue — receives data with row and column:

CustomTooltip.vue
<script setup>
    const props = defineProps({ data: {} });
    // props.data.row — the hovered row object
    // props.data.column — the hovered column object
</script>

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

Related articles: