Adding tooltips

Adding a tooltip

You can add a default tooltip to a cell or your custom one. To add a tooltip, you should do the following:

1. Import the Tooltip component
2. To enable/disable tooltips, use the tooltip parameter of the columns property:
   • set it to false to disable
   • set it to true or do not specify to show a tooltip by default
   • define a function that takes an object to be processed as an argument and returns the string to show
3. Wrap the Grid tag inside the Tooltip tag and bind it to the Grid api

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

    const { data } = getData();

    const columns = [
        { id: "id", width: 50, tooltip: false },
        { id: "city", width: 100, header: "City" },
        { id: "firstName", header: "First Name", width: 150, tooltip: false },
        { id: "lastName", header: "Last Name", width: 150, tooltip: false },
        { id: "email", header: "Email" },
        { id: "companyName", header: "Company" },
        { id: "stars", tooltip: false },
        { id: "date", tooltip: obj => obj.date?.toDateString() },
    ];

    const api = ref();
</script>

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

Showing tooltip for overflowing text

To show a tooltip only when the cell text is not fully visible, set the overflow prop on the Tooltip component:

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

    const { data } = getData();

    const columns = [
        { id: "city", width: 100, header: "City" },
        { id: "email", header: "Email" },
        { id: "companyName", header: "Company" },
    ];

    const api = ref();
</script>

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

Setting custom tooltip content

In the next example we add a custom Vue component as a tooltip:

• prepare and import your custom template that should be a Vue component (SFC)
• import the Tooltip component and wrap the Grid tag into the Tooltip tag
• add the name of the template as the value of the Tooltip content attribute
• bind Tooltip to the Grid api object

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

    const { data, columns } = getData();

    const api = ref();
</script>

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

Example of a custom component:

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 class="text">
            {{ props.data.row.email }}
        </div>
    </div>
</template>

<style scoped>
    .data {
        background-color: white;
    }
    .text {
        font-size: 13px;
        color: black;
    }
</style>

Changing a tooltip style

To customize the tooltip appearance, pass a CSS class name via the css prop and override the tooltip CSS variables scoped to that class:

<template>
    <Tooltip :api="api" css="my-tooltip">
        <Grid :data="data" :columns="columns" ref="api" />
    </Tooltip>
</template>

<style>
    :global(.my-tooltip) {
        --wx-tooltip-background: white;
        --wx-tooltip-font-color: black;
        --wx-tooltip-padding: 8px 12px;
        --wx-border-radius: 8px;
    }
</style>

Available CSS variables:

Variable	Default	Description
--wx-tooltip-background	#2c2f3c	tooltip background color
--wx-tooltip-font-color	#ffffff	tooltip text color
--wx-tooltip-font	inherited	font shorthand
--wx-tooltip-padding	4px 8px	inner padding
--wx-tooltip-border	transparent	border color
--wx-tooltip-arrow-size	6px	size of the arrow
--wx-tooltip-point-offset	14px	offset for point placement
--wx-tooltip-z-index	1002	stacking order

---

Related sample: Tooltips for data cells

Related articles: Tooltip