Skip to main content

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

Example:

<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: "date", tooltip: (obj) => obj.date?.toDateString() },
    ];

    const api = ref();

</script>

<template>
    <Tooltip :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 "../data";
    import { Grid, Tooltip } from "@svar-ui/vue-grid";
    import { ref } from "vue";
    import YourCustomTooltip from "../custom/CustomTooltip.vue";

    const { data, columns } = getData();

    const api = ref();

</script>

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

Example of a custom component:

<script setup>
    const props = defineProps({ data: {} });
</script>

<template>
    <div class="data">
        <div class="text">
            {{ props.data.email }}
        </div>
    </div>
</template>

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

Changing a tooltip style​

The example below shows how to change the default style of tooltips via CSS classes.

<style>    
    :global(.wx-area .tooltip){
        background-color: white;
        color:black;
        border: 2px black;
    }
</style>

Related sample: Tooltips for data cells