120k
New

Tooltip

PreviousNext

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/tooltip

Usage

The Tooltip.Provider component should be placed once in your root layout, wrapping all content that will contain tooltips. This ensures that only one tooltip within the provider can be open at a time.

src/routes/+layout.svelte
<script lang="ts">
  import * as Tooltip from "$lib/components/ui/tooltip/index.js";
 
  let { children } = $props();
</script>
<Tooltip.Provider>
  {@render children()}
</Tooltip.Provider>

Then use tooltips anywhere in your app:

<script lang="ts">
  import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
 
<Tooltip.Root>
  <Tooltip.Trigger>Hover</Tooltip.Trigger>
  <Tooltip.Content>
    <p>Add to library</p>
  </Tooltip.Content>
</Tooltip.Root>

Composition

Use the following composition to build a Tooltip:

Tooltip.Provider
└── Tooltip.Root
    ├── Tooltip.Trigger
    └── Tooltip.Content

Examples

Side

Use the side prop to change the position of the tooltip.

With Keyboard Shortcut

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix Tooltip documentation.