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>
    import { getData } from "./common/data";
    import { Grid, Tooltip } from "wx-svelte-grid";
    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() },
    ];

    let api = $state();

</script>

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

Setting custom tooltip content

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

• prepare and import your custom template that should be a Svelte component
• 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>
    import { getData } from "../data";
    import { Grid, Tooltip } from "wx-svelte-grid";
    import YourCustomTooltip from "../custom/CustomTooltip.svelte";

    const { data, columns } = getData();

    let api = $state();

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

Example of a custom component:

<script>
    let { data } = $props();

</script>

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


<style>
    .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>