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, constraint, deadline, link, rollup, resource, histogram, or sCurve 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 for constraint markers

PRO

The functionality is available in PRO Edition only

When the cursor is over a constraint marker, the content component receives data.constraint: the task that owns the marker. Read the type and date from its constraint field. The violated flag is true if the constraint is violated; task bars receive the same flag next to data.task.

<!-- 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.constraint" class="tooltip">
    <div class="title">{{ data.constraint.text }}</div>
    <div>
      {{ data.constraint.constraint.type.toUpperCase() }}:
      {{ format(data.constraint.constraint.date, mask) }}
    </div>
    <div v-if="data.violated">The constraint is violated</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 in "utilization" mode, or the histogram shape in "histogram" mode.

<script setup>
  import { ref } from "vue";
  import { getData, resources, assignments } from "../data";
  import { Gantt, ResourceLoad, Tooltip } from "@svar/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, $capacityTotal, and $overloaded fields:

• $total — hours actually assigned to the resource over the visible scale range
• $capacityTotal — total available hours for the resource over the visible scale range, based on its calendar
• $overloaded — true if the resource's load exceeds its capacity for any period in range

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>Capacity: {{ data.resource.$capacityTotal }}h</div>
    <div>Overloaded: {{ data.resource.$overloaded }}</div>
  </div>
</template>

In "histogram" mode, the cursor over a bar passes data.histogram instead of data.resource:

data.histogram = { resource, start, end, hours, capacity, days };

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

<template>
  <div v-if="data.histogram" class="tooltip">
    <div>{{ data.histogram.resource.name }}</div>
    <div>{{ data.histogram.hours }}h / {{ data.histogram.capacity }}h</div>
  </div>
</template>

Without a custom content component, ResourceLoad shows the default tooltip: "{name}: {hours}h / {capacity}h" for histogram bars.

Add tooltips to s-curve markers

PRO

The functionality is available in PRO Edition only

When sCurve is on, hovering a curve marker passes an sCurve object to content instead of task or link. Create a template component, for example MySCurveTooltip.vue, and pass it to content:

<script setup>
  import { ref } from "vue";
  import { getData } from "../data";
  import { Gantt, Tooltip } from "@svar/vue-gantt";
  import MySCurveTooltip from "./MySCurveTooltip.vue";

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

<template>
  <Tooltip :api="api" :content="MySCurveTooltip">
    <Gantt
      ref="api"
      :tasks="data.tasks"
      :links="data.links"
      :scales="data.scales"
      :sCurve="[{ type: 'scheduled' }, { type: 'earned' }]"
    />
  </Tooltip>
</template>

In the template, check data.sCurve to confirm the tooltip is showing a curve marker, then read its fields to build the body: date is the hovered point on the timeline, hovered is the line under the cursor, and lines holds every line's value at that same date. Use lines to list all curves side by side and highlight the hovered one:

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

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

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

<template>
  <div v-if="data.sCurve" class="tooltip">
    <div class="title">{{ format(data.sCurve.date, mask) }}</div>
    <div
      v-for="line in data.sCurve.lines"
      :key="line.line"
      :class="{ current: line === data.sCurve.hovered }"
    >
      {{ line.type }}: {{ line.value.toFixed(0) }}%
    </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>

Rollups always show a tooltip regardless of overflow. Links show no default tooltip text at all. They only display something when a custom content component is supplied.

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:

• Tooltips
• Resource load
• sCurve

Related articles:

• Tooltip API
• How to access Gantt API
• S-curve