resolver

Description

Optional. A function called on every hovered element that returns the tooltip content

Usage

resolver?: (element: HTMLElement, event: MouseEvent) => string | object | null;

Parameters

The resolver function receives two arguments:

• element - a DOM ancestor of event.target, passed to the resolver in order from innermost to outermost
• event - the MouseEvent that triggered the hover

It is called for each ancestor element in turn; the first non-null return wins and that element becomes the tooltip positioning anchor.

Return value:

• string — displayed as plain text when no content is set; passed as <Content data={string} /> when content is set
• object — spread as props into content (<Content v-bind="result" />); when no content is set, result.data is rendered as text
• null — check continues to the next ancestor; if all ancestors return null, no tooltip is shown

The default resolver reads the data-tooltip-text attribute of each checked element.

Example

<Tooltip
  :content="UserCard"
  :resolver="el => el.dataset.userId ? { id: Number(el.dataset.userId) } : null"
>
  <div v-for="user in users" :key="user.id" :data-user-id="user.id">{{ user.label }}</div>
</Tooltip>

Related article: Render custom content in a tooltip

Related sample: Tooltip