Skip to main content

Tooltip

Tooltip

Contextual information displayed on hover

Tags: component overlay help

View Demo

Tooltips display informative text when users hover over, focus on, or tap an element.

Import​

<script>
  import { Tooltip } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Tooltip content="This is a tooltip">
  {#snippet children({ props })}
    <Button {...props}>Hover me</Button>
  {/snippet}
</Tooltip>

Props​

Prop Type Default Description
content string Required Text content of the tooltip
side 'top' | 'right' | 'bottom' | 'left' 'top' Preferred side for placement
align 'start' | 'center' | 'end' 'center' Alignment along the side
delayDuration number - Delay before showing (ms)
children Snippet<[{ props }]> Required Trigger content. Spread props on a focusable element; a snippet that ignores them (an icon, plain text) is wrapped in a focusable span

Positioning​

Side​

Control which side the tooltip appears on:

<Tooltip content="Top tooltip" side="top">
  {#snippet children({ props })}<Button {...props}>Top</Button>{/snippet}
</Tooltip>

<Tooltip content="Right tooltip" side="right">
  {#snippet children({ props })}<Button {...props}>Right</Button>{/snippet}
</Tooltip>

<Tooltip content="Bottom tooltip" side="bottom">
  {#snippet children({ props })}<Button {...props}>Bottom</Button>{/snippet}
</Tooltip>

<Tooltip content="Left tooltip" side="left">
  {#snippet children({ props })}<Button {...props}>Left</Button>{/snippet}
</Tooltip>

Alignment​

Adjust alignment along the side:

<Tooltip content="Aligned to start" side="top" align="start">
  {#snippet children({ props })}<Button {...props}>Start</Button>{/snippet}
</Tooltip>

<Tooltip content="Aligned to center" side="top" align="center">
  {#snippet children({ props })}<Button {...props}>Center</Button>{/snippet}
</Tooltip>

<Tooltip content="Aligned to end" side="top" align="end">
  {#snippet children({ props })}<Button {...props}>End</Button>{/snippet}
</Tooltip>

Delay​

Add a delay before showing the tooltip:

<Tooltip content="Delayed tooltip" delayDuration={500}>
  {#snippet children({ props })}<Button {...props}>Hover (500ms delay)</Button>{/snippet}
</Tooltip>

Arrow​

Tooltips include an arrow indicator pointing to the trigger element.

Accessibility​

The Tooltip component includes:

  • Proper ARIA attributes for screen readers
  • Keyboard focusable triggers
  • Tooltip appears on focus (not just hover)
  • Auto-positioning to stay in viewport
Touch Devices

On touch devices, tooltips typically appear on tap and dismiss on another tap. Consider using title attributes or inline text for critical information.

Examples​

Icon Button with Tooltip​

<Tooltip content="Edit item">
  {#snippet children({ props })}
    <Button {...props} variant="ghost" size="icon" aria-label="Edit">
      <svg class="h-4 w-4"><!-- edit icon --></svg>
    </Button>
  {/snippet}
</Tooltip>

Form Field Help​

<div class="flex items-center gap-2">
  <Label for="password">Password</Label>
  <Tooltip content="Password must be at least 8 characters with one uppercase letter">
    {#snippet children()}
      <svg class="h-4 w-4 text-muted-foreground cursor-help">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
        <path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2" />
      </svg>
    {/snippet}
  </Tooltip>
</div>

Truncated Text​

<Tooltip content={fullText}>
  {#snippet children()}
    <span class="truncate max-w-xs block">{fullText}</span>
  {/snippet}
</Tooltip>

Disabled Button Explanation​

<Tooltip content="You need admin permissions to perform this action">
  {#snippet children()}
    <span>
      <Button disabled>Delete</Button>
    </span>
  {/snippet}
</Tooltip>
Disabled Elements

Wrap disabled elements in a <span> since disabled elements don't receive mouse events.

Status Indicator​

<Tooltip content="Online - Last seen 2 minutes ago" side="right">
  {#snippet children()}
    <span class="inline-flex h-2 w-2 rounded-full bg-green-500"></span>
  {/snippet}
</Tooltip>

Keyboard Shortcut​

<Tooltip content="Save (Ctrl+S)">
  {#snippet children({ props })}
    <Button {...props}>Save</Button>
  {/snippet}
</Tooltip>

Multiple Tooltips​

<div class="flex gap-2">
  <Tooltip content="Bold">
    {#snippet children({ props })}<Button {...props} variant="ghost" size="icon">B</Button
      >{/snippet}
  </Tooltip>
  <Tooltip content="Italic">
    {#snippet children({ props })}<Button {...props} variant="ghost" size="icon">I</Button
      >{/snippet}
  </Tooltip>
  <Tooltip content="Underline">
    {#snippet children({ props })}<Button {...props} variant="ghost" size="icon">U</Button
      >{/snippet}
  </Tooltip>
</div>

Best Practices​

  • Keep tooltip text concise (1-2 lines max)
  • Don't put interactive elements inside tooltips
  • Use for supplementary information, not critical content
  • Ensure the information is also available through other means
  • Consider longer delays for experienced users
On this page