Adding tooltips

Adding a default tooltip

To add a default tooltip that displays the task name, do the following:

• import the Tooltip component from Gantt
• wrap the Gantt tag into the Tooltip tag
• pass the api object to the Tooltip component

Example:

<script>
    import { getData } from "../data";
    import { Gantt, Tooltip } from "wx-svelte-gantt";
    
    const data = getData();
    let api;
</script>

<Tooltip {api}>
    <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        bind:api
    />
</Tooltip>

Adding a custom tooltip

To add a custom template to a tooltip:

• import the Tooltip component from Gantt
• 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 Gantt tag into the Tooltip tag
• pass the api object to the Tooltip component

Example:

<script>
    import { getData } from "../data";
    import { Gantt, Tooltip } from "wx-svelte-gantt";
    import MyTooltipContent from "../custom/MyTooltipContent.svelte";

    const data = getData();
    let api;
</script>

<Tooltip {api} content={MyTooltipContent}>
    <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        bind:api
    />
</Tooltip>

Below is an example of the custom template for a tooltip:

<script>
    import { format } from "date-fns";
    export let data;

    const mask = "yyyy.MM.dd";
</script>

{#if data}
    <div class="data">
        <div class="text">
            <span class="caption">{data.type}:</span>
            {data.text}
        </div>
        <div class="text">
            <span class="caption">start:</span>
            {format(data.start, mask)}
        </div>
        {#if data.end}
            <div class="text">
                <span class="caption">end:</span>
                {format(data.end, mask)}
            </div>
        {/if}
    </div>
{/if}

<style>
    .data {
        white-space: nowrap;
        background-color: var(--wx-tooltip-background);
        padding: 3px 8px;
    }

    .text {
        font-family: var(--wx-font-family);
        color: var(--wx-color-primary-font);
        font-size: 13px;
        text-transform: capitalize;
        margin-bottom: 5px;
    }

    .text:last-child {
        margin-bottom: 0;
    }

    .caption {
        font-weight: 700;
    }
</style>