Docs
Tooltip
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button builders={[builder]} variant="outline">Hover</Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p>Add to library</p>
</Tooltip.Content>
</Tooltip.Root>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<Tooltip.Root>
<Tooltip.Trigger asChild let:builder>
<Button builders={[builder]} variant="outline">Hover</Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p>Add to library</p>
</Tooltip.Content>
</Tooltip.Root>
Installation
npx shadcn-svelte@latest add tooltip
Usage
<script lang="ts">
import * as Tooltip from "$lib/components/ui/tooltip";
</script>
<Tooltip.Root>
<Tooltip.Trigger>Hover</Tooltip.Trigger>
<Tooltip.Content>
<p>Add to library</p>
</Tooltip.Content>
</Tooltip.Root>
On This Page