Tooltip

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

Docs API Reference Component Source

<script lang="ts">
  import { buttonVariants } from "../ui/button/index.js";
  import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
 
<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger class={buttonVariants({ variant: "outline" })}
      >Hover</Tooltip.Trigger
    >
    <Tooltip.Content>
      <p>Add to library</p>
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

Installation

pnpm dlx shadcn-svelte@next add tooltip

npx shadcn-svelte@next add tooltip

bun x shadcn-svelte@next add tooltip

npx shadcn-svelte@next add tooltip

Install bits-ui:

pnpm i bits-ui -D

npm i bits-ui -D

bun install bits-ui -D

yarn install bits-ui -D

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

Usage

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

Toggle Typography