blue
View on GitHub

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.

Light
Hover over me
<script>
	import { tooltip } from 'deskblocks';
</script>

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

Delay

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

Placement

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

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.
allowHtml boolean false Renders content as markup instead of plain text.

Security:

content is rendered as plain text by default, so record data and other untrusted values cannot inject markup into the page. Only set allowHtml when the content is authored by you and you need the markup. Never set it for values that come from an API response or user input.