Skip to main content

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 setup>
    import { getData } from "../data";
    import { Gantt, Tooltip } from "@svar-ui/vue-gantt";
    
    const data = getData();
    const api = ref(null);
</script>

<template>
    <Tooltip :api="api">
        <Gantt
            :tasks="data.tasks"
            :links="data.links"
            :scales="data.scales"
            ref="api"
        />
    </Tooltip>
</template>

Adding a custom tooltip​

To add a custom template to a tooltip:

  • import the Tooltip component from Gantt
  • prepare your custom Vue 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 setup>
    import { getData } from "../data";
    import { Gantt, Tooltip } from "@svar-ui/vue-gantt";
    import MyTooltipContent from "../custom/MyTooltipContent.vue";

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

<template>
    <Tooltip :api="api" :content="MyTooltipContent">
        <Gantt
            :tasks="data.tasks"
            :links="data.links"
            :scales="data.scales"
            ref="api"
        />
    </Tooltip>
</template>

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

<script setup>
    import { format } from "date-fns";

    const props = defineProps({ data: {} });

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

<template>
    <div v-if="data" 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>
        <div v-if="data.end" class="text">
            <span class="caption">end:</span>
            {{ format(data.end, mask) }}
        </div>
    </div>
</template>

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

Related sample: Tooltips