Skip to main content

Tooltips

This guide shows you how to add tooltips to task bars, links, and resource load cells using the Tooltip component.

Add the default tooltip​

To show task-name tooltips, wrap Gantt inside Tooltip and pass the Gantt API through the api prop. The api prop connects Tooltip to the Gantt instance so it can resolve which element the cursor is over.

<script setup>
  import { ref } from "vue";
  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>

Without content component, the tooltip shows the task name. To control what it displays, pass a custom component.

Add a custom tooltip​

Pass a Vue component to content to customize the tooltip. The component receives data prop with the resolved Gantt object for the element under the cursor.

To add a custom tooltip:

  • import the Tooltip component from Gantt
  • prepare your custom Vue template
  • import your custom template
  • add the template name as the value of the content prop on Tooltip
  • wrap the Gantt tag inside the Tooltip tag
  • pass the api object to Tooltip
<script setup>
  import { ref } from "vue";
  import { getData } from "../data";
  import { Gantt, Tooltip } from "@svar-ui/vue-gantt";
  import MyTooltipContent from "./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>

Only one of task, link, rollup, or resource is defined on data at a time. The following snippet handles task bars and links in a single component:

<!-- MyTooltipContent.vue -->
<script setup>
  import { format } from "date-fns";

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

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

<template>
  <div v-if="data.task" class="tooltip">
    <div class="title">{{ data.task.text }}</div>
    <div>Start: {{ format(data.task.start, mask) }}</div>
    <div v-if="data.task.end">End: {{ format(data.task.end, mask) }}</div>
  </div>
  <div v-else-if="data.link" class="tooltip">
    <div>Link type: {{ data.link.type }}</div>
  </div>
</template>

Add tooltips in the resource load view​

To show tooltips over resource load cells, wrap both Gantt and ResourceLoad inside the same Tooltip. When the cursor is over a load cell, the content component receives the resource shape.

<script setup>
  import { ref } from "vue";
  import { getData, resources, assignments } from "../data";
  import { Gantt, ResourceLoad, Tooltip } from "@svar-ui/vue-gantt";
  import MyResourceTooltip from "./MyResourceTooltip.vue";

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

<template>
  <Tooltip :api="api" :content="MyResourceTooltip">
    <div class="gantt">
      <Gantt
        ref="api"
        :tasks="data.tasks"
        :links="data.links"
        :scales="data.scales"
        :resources="resources"
        :assignments="assignments"
      />
    </div>
    <div class="resource">
      <ResourceLoad :api="api" />
    </div>
  </Tooltip>
</template>

In MyResourceTooltip.vue, the resource shape contains the resource object with computed $total and $overloaded fields. To look up tasks assigned to this resource, call api.getResourceTasks().

<!-- MyResourceTooltip.vue -->
<script setup>
  const props = defineProps({ api: {}, data: {} });
</script>

<template>
  <div v-if="data.resource" class="tooltip">
    <div>{{ data.resource.name }}</div>
    <div>Total: {{ data.resource.$total }}h</div>
    <div>Overloaded: {{ data.resource.$overloaded }}</div>
  </div>
</template>

Show tooltip only for overflowing text​

By default, the tooltip is shown for every element. Set overflow to true to show it only when the anchor element's text is not fully visible. It's useful for grid cells where long text may be cut off.

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

Elements without text content (links, rollups) are not affected, their tooltip is always shown regardless of the overflow setting.

Configure placement and appearance​

You can control tooltip placement and behavior with at, arrow, overflow, touch, and delay props. See the Tooltip API for the full reference.

The example below positions the tooltip above the cursor with an arrow and a 500 ms delay:

<template>
  <Tooltip :api="api" at="top" arrow :delay="500">
    <Gantt ref="api" :tasks="tasks" :links="links" :scales="scales" />
  </Tooltip>
</template>

Style the tooltip​

You can add a custom CSS class to the tooltip via the css property. Use it to override default CSS variables and customize the tooltip appearance:

<template>
  <Tooltip :api="api" css="my-tooltip">
    <Gantt ref="api" :tasks="tasks" :links="links" :scales="scales" />
  </Tooltip>
</template>
:global(.my-tooltip) {
  --wx-tooltip-background: white;
  --wx-tooltip-font-color: black;
  --wx-tooltip-padding: 8px 12px;
  --wx-border-radius: 8px;
}

Available CSS variables:

  • --wx-tooltip-font — font shorthand (weight, size, family)
  • --wx-tooltip-font-color — text color. Default: #ffffff
  • --wx-tooltip-background — background color. Default: #2c2f3c
  • --wx-tooltip-border — border color. Default: transparent
  • --wx-tooltip-padding — inner padding. Default: 4px 8px
  • --wx-tooltip-point-offset — offset from the target point. Default: 14px
  • --wx-tooltip-arrow-size — arrow size. Default: 6px
  • --wx-tooltip-z-index — stacking order. Default: 1002

Related samples:

Related articles: