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>