Docs
Tooltip
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
<script lang="ts">
import { buttonVariants } from "$lib/components/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>
<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
npx shadcn-svelte@next add tooltip
Install bits-ui:
npm 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>
On This Page