component

Tooltip

Tooltips provide brief, informative messages that appear when a user interacts with an element.

Source code in GitHub Tooltip in Storybook

Set Up #

To use the Tooltip component, import it into your script.

Example.svelte

<script>
	import { Tooltip } from '@sans-ui/core';
</script>

Usage #

Display additional information when users hover over or focus on an element.

Example.svelte

<script>
	import { Tooltip, Button } from '@sans-ui/core';
</script>

<Tooltip title="This is title" size="md">
	<Button>Here is the Trigger</Button>
</Tooltip>

Variant #

Customize the color theme of the Tooltip with the variant prop.

Example.svelte

<script>
	import { Tooltip, Button } from '@sans-ui/core';
</script>

<Tooltip title="This is title" variant="primary">
	<Button variant="primary">Here is primary</Button>
</Tooltip>
<Tooltip title="This is title" variant="secondary">
	<Button variant="secondary">Here is secondary</Button>
</Tooltip>
<Tooltip title="This is title" variant="success">
	<Button variant="success">Here is success</Button>
</Tooltip>
<Tooltip title="This is title" variant="warning">
	<Button variant="warning">Here is warning</Button>
</Tooltip>
<Tooltip title="This is title" variant="danger">
	<Button variant="danger">Here is danger</Button>
</Tooltip>

Size #

Adjust the Tooltip size using the size prop.

Example.svelte

<script>
	import { Tooltip, Button } from '@sans-ui/core';
</script>

<Tooltip title="This is title" variant="primary">
	<Button variant="primary">Here is primary</Button>
</Tooltip>
<Tooltip title="This is title" variant="secondary">
	<Button variant="secondary">Here is secondary</Button>
</Tooltip>
<Tooltip title="This is title" variant="success">
	<Button variant="success">Here is success</Button>
</Tooltip>
<Tooltip title="This is title" variant="warning">
	<Button variant="warning">Here is warning</Button>
</Tooltip>
<Tooltip title="This is title" variant="danger">
	<Button variant="danger">Here is danger</Button>
</Tooltip>

Position #

Control the Tooltip’s position with the position prop.

Example.svelte

<script>
	import { Tooltip, Button } from '@sans-ui/core';
</script>

<Tooltip title="This is title" position="top"><Button>top</Button></Tooltip>
<Tooltip title="This is title" position="left"><Button>left</Button></Tooltip>
<Tooltip title="This is title" position="right"><Button>right</Button></Tooltip>
<Tooltip title="This is title" position="bottom"><Button>bottom</Button></Tooltip>

Trackable #

Make the Tooltip trackable with the trackable prop, so it follows the cursor.k

Example.svelte

<script>
	import { Tooltip, Button } from '@sans-ui/core';
</script>

<Tooltip title="This is title" trackable><Button>trackable</Button></Tooltip>

Delay Open And Close #

Set delays for opening and closing the Tooltip with delayToOpen and delayToHide props.

Example.svelte

<script>
	import { Tooltip, Button } from '@sans-ui/core';
</script>

<Tooltip title="This is title" delayToOpen={300}><Button>Delay Open</Button></Tooltip>
<Tooltip title="This is title" delayToHide={300}><Button>Delay Close</Button></Tooltip>

Accessibility #

Hover management and cross browser normalization.
Labeling support for screen readers ("aria-describedby").
Matches native tooltip behavior with delay on hover of first tooltip and no delay on subsequent tooltips.

API #

Tooltip provides APIs(Properties) that is necessary for you to configure a Tooltip compponent.

Tooltip Props #

Name	Type	Default Value
`id`	string \| undefined	""
`variant`	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'	'primary'
`size`	'sm' \| 'md' \| 'lg'	md
`trackable`	boolean	false
`delayToOpen`	number	0
`delayToHide`	number	300

Tooltip Slots #

Tooltip component consists of these elements and you have control over those elements. For example, you can override its Tailwind CSS by modifying some class names through classes props.

Name	Description
`base`	This slot is applied to the div element(tooltip component).
`trigger`	This slot is applied to the button element(trigger).
`tooltipContent`	This slot is applied to the span element that contains the content(the text for the tooltip).