Skip to main content

Tooltip API

Description​

Tooltip component for Gantt. Adds tooltips to task bars, links, and resource load cells

Usage​

type TooltipContentData =
  | { task: ITask; segmentIndex: number | null; violated?: boolean }
  | { constraint: ITask; violated?: boolean }
  | { link: ILink }
  | { rollup: ITask }
  | { resource: IResource }
  | { histogram: IResourceHistogramTooltip }
  | { sCurve: ISCurveTooltip }
  | { deadline: ITask };

interface IResourceHistogramTooltip {
  resource: IComputedResource;
  start: Date;
  end: Date;
  hours: number;
  capacity: number;
  days: number;
}

interface ISCurveTooltipLine {
  line: number;
  type: "scheduled" | "earned" | "baseline";
  metric: "duration" | "progress";
  value: number;
}

interface ISCurveTooltip {
  date: Date;
  hovered: ISCurveTooltipLine;
  lines: ISCurveTooltipLine[];
}

Tooltip: Component<{
  api?: IApi;
  content?: Component<{
    api: IApi;
    data: TooltipContentData;
  }>;
  resolver?: (element: HTMLElement, ev: MouseEvent) => object;
  at?: string;
  arrow?: boolean;
  overflow?: boolean;
  touch?: boolean;
  delay?: number;
  css?: string;
}>;

Import the component from @svar-ui/vue-gantt.

Parameters​

  • api - (optional) the Gantt API object. Required for the default resolver to identify the element under the cursor. You can omit it only if you supply a custom resolver.
  • content - (optional) a Vue component that renders the tooltip body. Default: null (shows the task name, the type and date for a constraint marker, or the date for a deadline marker). The component receives two props:
    • api - the Gantt API instance
    • data - a discriminated union describing the hovered element. Exactly one of the following shapes is active at a time:
      • { task: ITask; segmentIndex: number | null; violated?: boolean } — for task bars; segmentIndex is null for non-split tasks; violated is true if the task's constraint is violated | PRO feature. See tasks.
      • { constraint: ITask; violated?: boolean } — for constraint markers; constraint is the task that owns the marker, so read its constraint field for the type and date; violated is true if the constraint is violated. See Constraints. | PRO feature
      • { link: ILink } — for link lines. See links.
      • { rollup: ITask } — for rollup bars. See tasks. | PRO feature
      • { resource: IResource } — for resource load cells. See resources. | PRO feature
      • { histogram: IResourceHistogramTooltip } — for bars of the resource chart in the histogram mode. See resources. | PRO feature
        • resource - the resource of the hovered bar
        • start - the start date of the period the bar covers
        • end - the end date of the period the bar covers, exclusive
        • hours - the resource load within the period, in hours
        • capacity - the resource capacity within the period, in hours
        • days - the number of days the bar covers
      • { sCurve: ISCurveTooltip } — for s-curve line markers. See sCurve. | PRO feature
        • date - the hovered date
        • hovered - the line under the cursor, as { line, type, metric, value }
        • lines - every line at that same date, each as { line, type, metric, value }
          • line - the line's position among the lines actually rendered
          • type - "scheduled", "earned", or "baseline"
          • metric - "duration" or "progress"
          • value - percent complete (0-100) at date
      • { deadline: ITask } — for deadline markers; deadline is the task that owns the marker, so read its deadline field for the date. See Deadlines. | PRO feature
  • resolver - (optional) a custom function that receives the hovered DOM element and the pointer event, and returns the data object passed to content. Replaces the default resolver.
  • at - (optional) tooltip placement relative to the cursor or target element. Default: "point". Accepts "point", "top", "bottom", "left", "right", and directional variants: "top-start", "top-center", "top-end", "bottom-start", "bottom-center", "bottom-end", "left-start", "left-center", "left-end", "right-start", "right-center", "right-end". See Core Tooltip API for details.
  • arrow - (optional) shows an arrow pointing to the target element. Default: false.
  • overflow - (optional) when true, the tooltip is shown only if the text in the anchor element is not fully visible. Default: false.
  • touch - (optional) enables tooltips on touch devices. Default: false.
  • delay - (optional) delay in milliseconds before the tooltip appears. Default: 300. The tooltip disappears immediately when the cursor leaves.
  • css - (optional) a CSS class name applied to the tooltip. Use it to override default CSS variables.

Example​

The example below adds the default tooltip that shows the task name. Pass ref="api" on Gantt and forward the same api to Tooltip. For more details, refer to How to access Gantt API.

<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>

Related articles: