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 }
  | { link: ILink }
  | { rollup: ITask }
  | { resource: IResource };

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/svelte-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 Svelte component that renders the tooltip body. Default: null (shows the task name). 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 } — for task bars; segmentIndex is null for non-split tasks. See tasks.
      • { link: ILink } — for link lines. See links.
      • { rollup: ITask } — for rollup bars. See tasks.
      • { resource: IResource } — for resource load cells. See resources.
  • 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 bind:this={api} on Gantt and forward the same api to Tooltip. For more details, refer to How to access Gantt API.

<script>
  import { getData } from "../data";
  import { Gantt, Tooltip } from "@svar-ui/svelte-gantt";

  const data = getData();
  let api = $state();
</script>

<Tooltip {api}>
  <Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
    bind:this={api}
  />
</Tooltip>

Related articles: