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
     tooltip can be a function that takes an object to be processed as an argument and returns the processed value
3. Wrap the Grid tag inside the Tooltip tag and bind to the Grid api

Example:

<script>
    import { getData } from "./common/data";
    import { Tooltip } from "@wx/svelte-core";
    import { Grid } from "@wx/svelte-grid";
    const { data } = getData();

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

    let api;

</script>

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

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

• import the Tooltip component that should be a Svelte component
• prepare you custom Svelte template
• import your custom template
• add the name of the template as the value of the Tooltip content attribute
• wrap the Grid tag into the Tooltip tag
• use the internal api object to get access to the methods

<script>
    import { getData } from "../data";
    import { Grid, Tooltip } from "@wx/svelte-grid";
    import YourCustomTooltip from "../custom/CustomTooltip.svelte";

    const { data, columns } = getData();

    let api;

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

Example of a custom component:

<script>
    export let data;

</script>

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


<style>
    .data {
        background-color: white;
    }

    .text {
        font-family: var(--wx-font-family);
        font-size: 13px;
        color: black;
    }

</style>

Changing the tooltip style

The example below shows how to change the default style of tooltips changing the values in the CSS class.

<script>
    import { getData } from "../data";
    import { Grid, Tooltip } from "@wx/svelte-grid";
    
    const { data, columns } = getData();

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

    let api;
    
</script>

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

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