Tooltip

A tooltip displays a brief, informative message when users hover over or focus on an element, providing additional context or guidance.

Usage

The tooltip component takes advantage of Svelte actions to display tooltips. Svelte actions are functions that add behavior directly to elements. They are applied using the use directive followed by the function name.

Svelte Actions:

Actions are functions that are called when an element is created. They can return an object with a destroy method, that is called after the element is unmounted.
Learn more about the action directive.
Check the official Svelte action documentation.

Appearance: Light

Hover over me

<script>
	import { tooltip } from 'deskblocks';
</script>

<div use:tooltip={{ content: 'tooltip content' }}>Hover over me</div>

Delay

Appearance: Light

Displays tooltip after 1500ms

<div use:tooltip={{ content: 'Tooltip Content', delay: '1500' }}>Displays tooltip after 1500ms</div>

Placement

Appearance: Light

Right Top BottomEnd RightEnd

<div>
	<span use:tooltip={{ content, placement: 'right' }}>Right</span>
	<span use:tooltip={{ content, placement: 'top' }}>Top</span>
	<span use:tooltip={{ content, placement: 'bottom-end' }}>BottomEnd</span>
	<span use:tooltip={{ content, placement: 'right-end' }}>RightEnd</span>
</div>

Offset

Appearance: Light

26px offset from the trigger

<div use:tooltip={{ content: 'Tooltip Content', offset: 26 }}>26px offset from the trigger</div>

Props

`placement`	top \| right \| bottom \| left \| top-start \| right-start \| bottom-start \| left-start \| top-end \| right-end \| bottom-end \| left-end	bottom	Defines the position of the tooltip relative to the target element.
`offset`	number	8	Sets the distance (in pixels) between the tooltip and the target element.
`delay`	number	200	Specifies the delay (in milliseconds) before the tooltip appears after hovering over the target element.
`content`	string	undefined	The text or content that will be displayed inside the tooltip.