Tooltip in grid cell

Vedansh

In your Svelte datagrid I’m adding a tooltip to a grid cell. By default it has black background. I want to make it white with a grey font. How can I do it?

SVAR_tech

You can apply your custom tooltip style by creating and importing your own custom Svelte component and using the Tooltip feature.

1) Create your custom Svelte component
Here define your css parameters (white background and black font)
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 {
         border: 2px grey;
         background-color: white;
    }

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

</style>

2) Then import the default Tooltip component from @wx/svelte-grid and import your component to the application page and define it inside the Tooltip tag and bind it to the api object

Example:

<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>
    <div>
        <Tooltip content={YourCustomTooltip} {api}>
            <Grid {data} {columns} bind:api />
        </Tooltip>
    </div>
</div>

If you need to change the default tooltip style (for all tooltips):

:global(.wx-area .tooltip){
    background-color:white;
    color:black;
}

Please check this article in the grid's docs.