Docs
Tooltip

Tooltip

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

Component Source Primitive Reference (Radix Svelte)

Installation

	npx shadcn-svelte add tooltip

	npx shadcn-svelte add tooltip

Usage

	<script lang="ts">
  import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
  } from "$components/ui/tooltip";
</script>

	<script lang="ts">
  import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
  } from "$components/ui/tooltip";
</script>

	<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

	<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
Toggle