Tooltip

Visualization & Interaction

Display Content when hovering over a Trigger

Custom Trigger
Custom Content
Smart Floating Content

Quickstart #

<script>
	import { Tooltip, Button } from '@steeze-ui/components'
</script>

<Tooltip>
	<Button slot="trigger" let:id aria-describedby={id}>Open</Button>
	<span slot="content">Hi There! Iam Content.</span>
</Tooltip>

API Reference #

Property	Type	Default
`position`	`FloatingPosition`	`"bottom"`
`delay`	`Number`	`500`
`manualOpened`	`Boolean`	`false`

Styling #

Name	Default
`--st-tooltip-padding`	`--st-field-padding-sm`
`--st-tooltip-font-size`	`--st-font-size-sm`
`--st-tooltip-font-weight`	`--st-font-weight-normal`
`--st-tooltip-color`	`--st-body-text-color`
`--st-tooltip-bg-color`	`--st-overlay-bg-color`
`--st-tooltip-border-radius`	`--st-overlay-border-radius`

Examples #

Manually Open Tooltip

In some cases you may want to control the tooltip manually e.g. open it on focus for mobile experiences

<script>
	import { Tooltip } from '@steeze-ui/components'

	let focused = false
</script>

<Tooltip bind:manualOpened={focused}>
	<button
		slot="trigger"
		on:focus={() => (focused = true)}
		on:blur={() => (focused = false)}
	>
	Show Tooltip on mobile!
	</button>

	<span slot="content">Content</span>
</Tooltip>