huntabyte__shadcn-svelte/docs/content/components/tooltip.md

title, description, component, links

title	description	component	links
Tooltip	A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.	true	source doc api https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/tooltip https://bits-ui.com/docs/components/tooltip https://bits-ui.com/docs/components/tooltip#api-reference

<script> import ComponentPreview from "$lib/components/component-preview.svelte"; import PMAddComp from "$lib/components/pm-add-comp.svelte"; import PMInstall from "$lib/components/pm-install.svelte"; import Steps from "$lib/components/steps.svelte"; import Step from "$lib/components/step.svelte"; import InstallTabs from "$lib/components/install-tabs.svelte"; </script>

Installation

{#snippet cli()} {/snippet} {#snippet manual()}

Install bits-ui:

Copy and paste the component source files linked at the top of this page into your project.

{/snippet}

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.

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

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>