Tooltip

A tooltip displays additional information about another component. The information is displayed above and near the target component.

Usage

Use a children snippet to receive the tooltip's accessibility attributes and spread them onto the target element. The snippet also receives an attachment as its second argument, which you can attach to the element that should act as the trigger.

<script>
	import { Tooltip, Button } from 'fluentui-svelte';
</script>

<Tooltip content="Tooltip content" relationship="description" withArrow>
	{#snippet children(attrs)}
		<Button {...attrs}>Hover over me</Button>
	{/snippet}
</Tooltip>

You can also pass the target directly as a child. The tooltip then attaches itself to the next rendered element, but the accessibility attributes are not applied.

<script>
	import { Tooltip, Button } from 'fluentui-svelte';
</script>

<Tooltip content="Tooltip content" relationship="description" withArrow>
  <Button>Hover over me</Button>
</Tooltip>

Component API

A brief explanation of the props that really need explaining. You can see the rest of the props in the Component Props section below.

With Arrow

The withArrow prop is a boolean that, when set to true, adds an arrow to the tooltip pointing towards the target element. This can help visually connect the tooltip to the element it is describing.

<Tooltip content="Tooltip with arrow" relationship="description" withArrow>
  {#snippet children(attrs)}
    <Button {...attrs}>With arrow</Button>
  {/snippet}
</Tooltip>

Delay

The openDelay and hideDelay props allow you to specify a delay, in milliseconds, before the tooltip is shown or hidden after the user hovers over the target element. This can help prevent the tooltip from appearing or disappearing too quickly.

<Tooltip content="Delayed tooltip" openDelay={500} hideDelay={200}>
  {#snippet children(attrs)}
    <Button {...attrs}>Delayed</Button>
  {/snippet}
</Tooltip>

Component Props