Components / Feedback

Tooltip

Component

Displays a tooltip when hovering or focusing over a target content, with dynamic positioning based on available screen space.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component, then make it your own.

ComponentTooltip

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Tooltip } from "sveltekit-ui"
</script>

<Tooltip>
  {#snippet target_content()}<button type="button">What is a workspace?</button>{/snippet}
  {#snippet tooltip_content()}<p>A workspace groups your projects and team members.</p>{/snippet}
</Tooltip>

API reference

Props accepted by the component.

3 entries in properties

Property	Type	Default	Description
`tooltip_content`	`snippet`	`—`	The content displayed inside the tooltip.
`target_content`	`snippet`	`—`	The content that triggers the tooltip when hovered or focused.
`is_disabled`	`boolean`	`false`	Disables the tooltip from being displayed.