Tooltip

Installation

CLI
Manual

npx shadcn-svelte@next add tooltip

Install bits-ui

npm install bits-ui -D

Copy and paste the component source

Copy and paste the component source code into your project.

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>

showLineNumbers

<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>

Nested Providers

You can nest providers to create groups with different settings. Tooltips use the closest ancestor provider. This is useful when you want instant tooltips in specific areas:

<Tooltip.Provider delayDuration={0}>
  <!-- Tooltips here will open instantly -->
</Tooltip.Provider>

Changelog

We’ve updated the tooltip colors to use the foreground color for the background and the background color for the foreground. Replace bg-primary text-primary-foreground with bg-foreground text-background for <Tooltip.Content />.

Get Started

Components

Customization

CLI

Advanced

Resources

Installation

Usage

Nested Providers

Changelog

2025-12 Update tooltip colors

Links

​Installation

​Usage

​Nested Providers

​Changelog

​2025-12 Update tooltip colors

​Links

Installation

Usage

Nested Providers

Changelog

2025-12 Update tooltip colors

Links