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 {...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}
>
  {#each users as user}
    <div data-user-id={user.id}>{user.label}</div>
  {/each}
</Tooltip>

Related article: Render custom content in a tooltip

Related sample: Tooltip