> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

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

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx shadcn-svelte@next add tooltip
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Install bits-ui">
        ```bash theme={null}
        npm install bits-ui -D
        ```
      </Step>

      <Step title="Copy and paste the component source">
        Copy and paste the component source code into your project.
      </Step>
    </Steps>
  </Tab>
</Tabs>

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

```svelte title="src/routes/+layout.svelte" showLineNumbers theme={null}
<script lang="ts">
  import * as Tooltip from "$lib/components/ui/tooltip/index.js";

  let { children } = $props();
</script>
```

```svelte showLineNumbers theme={null}
<Tooltip.Provider>
  {@render children()}
</Tooltip.Provider>
```

Then use tooltips anywhere in your app:

```svelte theme={null}
<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:

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

## Changelog

### 2025-12 Update tooltip colors

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 />`.

## Links

* [Source](https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/tooltip)
* [Bits UI Documentation](https://bits-ui.com/docs/components/tooltip)
* [API Reference](https://bits-ui.com/docs/components/tooltip#api-reference)