Copy page

Components

Tooltip

src/lib/components/ui/tooltip/

Purpose

Tooltip primitives. The barrel re-exports Root, Trigger, Provider from bits-ui (via $lib/vendor/bits-ui-tooltip-exports to dodge a Vite 8 SSR namespace issue) and adds two Primebrick extensions:

• Content (tooltip-content.svelte) — the standard shadcn-svelte™ tooltip content with Primebrick styling.
• PriorityContent (priority-tooltip-content.svelte) — tooltip content with a semaphoric icon and optional title. priority (INFORMATION | WARNING | ERROR | QUESTION | HINT | SUCCESS) selects the icon and color (text-info, text-warning, text-destructive, text-success).
• TooltipPortal (tooltip-portal.svelte) — portal wrapper used by PriorityContent.

Origin

shadcn-svelte™ (extended) — base primitives come from bits-ui / shadcn-svelte™. PriorityContent and the project-specific Content styling are Primebrick additions.

Usage

Plain tooltip

Code
<script lang="ts">
  import * as Tooltip from "$lib/components/ui/tooltip";
</script>

<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Content>Simple tooltip</Tooltip.Content>
</Tooltip.Root>

Trigger as a child snippet

Code
<Tooltip.Root>
  <Tooltip.Trigger>
    {#snippet child({ props })}
      <button {...props} class="btn">Custom trigger</button>
    {/snippet}
  </Tooltip.Trigger>
  <Tooltip.Content>Content</Tooltip.Content>
</Tooltip.Root>

Priority tooltip — warning with title

Code
<Tooltip.Root>
  <Tooltip.Trigger>Field name</Tooltip.Trigger>
  <Tooltip.PriorityContent priority="WARNING" title="Reserved name">
    This name is reserved and cannot be used.
  </Tooltip.PriorityContent>
</Tooltip.Root>

Priority tooltip — hint

Code
<Tooltip.Root>
  <Tooltip.Trigger>Slug</Tooltip.Trigger>
  <Tooltip.PriorityContent priority="HINT">
    Use lowercase kebab-case, e.g. <code>my-module</code>.
  </Tooltip.PriorityContent>
</Tooltip.Root>

Props

Full prop table: see API reference — tooltip.

Key props:

Content — accepts ContentProps from bits-ui plus standard styling props (class, ref, sideOffset).

PriorityContent — extends ContentProps with:

• priority (TooltipPriority, default "INFORMATION") — one of INFORMATION | WARNING | ERROR | QUESTION | HINT | SUCCESS. Selects the leading icon and its semaphoric color.
• title (string) — optional bold heading rendered above the body. When omitted, only the icon is shown next to the body.
• children (Snippet, required) — tooltip body.

The exported TooltipPriority type is re-exported from the barrel.

Next steps

• Input
• FormLabelWithHelp
• FormLabelWithPriorityHelp
• Component catalog
• UI stack
• API reference