Display

Tooltip

Floating label shown on hover and focus, with four placements and a configurable delay.

<script>
  import { Tooltip, Button } from "@codeatlasdev/ui";
</script>

<Tooltip content="Save changes">
  {#snippet triggerChild(props)}
    <Button {...props}>Save</Button>
  {/snippet}
</Tooltip>

When the trigger is an interactive control, use triggerChild and spread the received props onto it so no extra wrapper button is created. children is for non-interactive content such as text, which the tooltip wraps in its own button. Tooltips open on keyboard focus without the delay and close on Escape. Pointer hover waits for delay, touch never opens them, and moving between tooltips within 300ms skips the delay. Never put essential information only in a tooltip.

All sides

top, right, bottom and left placement.

Code

<script lang="ts">
  import { Tooltip, Button } from '@codeatlasdev/ui';
</script>

<div class="grid">
  <Tooltip content="Tooltip on top" side="top">
    {#snippet triggerChild(props)}<Button variant="outlined" {...props}>Top</Button>{/snippet}
  </Tooltip>
  <Tooltip content="Tooltip on right" side="right">
    {#snippet triggerChild(props)}<Button variant="outlined" {...props}>Right</Button>{/snippet}
  </Tooltip>
  <Tooltip content="Tooltip on bottom" side="bottom">
    {#snippet triggerChild(props)}<Button variant="outlined" {...props}>Bottom</Button>{/snippet}
  </Tooltip>
  <Tooltip content="Tooltip on left" side="left">
    {#snippet triggerChild(props)}<Button variant="outlined" {...props}>Left</Button>{/snippet}
  </Tooltip>
</div>

<style>
  .grid { display: flex; flex-wrap: wrap; gap: var(--ca-space-3); padding: var(--ca-space-6); align-items: center; justify-content: center; width: 100%; }
</style>

On icon buttons

Gives icon-only buttons a visible label.

Code

<script lang="ts">
  import { Tooltip, IconButton } from '@codeatlasdev/ui';
  import { Info, Star, Heart, Zap } from '@lucide/svelte';
</script>

<Tooltip content="Info">
  {#snippet triggerChild(props)}<IconButton aria-label="Info" {...props}><Info size={20} /></IconButton>{/snippet}
</Tooltip>
<Tooltip content="Add to favourites">
  {#snippet triggerChild(props)}<IconButton aria-label="Favourite" {...props}><Heart size={20} /></IconButton>{/snippet}
</Tooltip>
<Tooltip content="Boost performance">
  {#snippet triggerChild(props)}<IconButton aria-label="Boost" {...props}><Zap size={20} /></IconButton>{/snippet}
</Tooltip>
<Tooltip content="Rate this component">
  {#snippet triggerChild(props)}<IconButton aria-label="Rate" {...props}><Star size={20} /></IconButton>{/snippet}
</Tooltip>

Custom delay

`delay={0}` opens immediately. The default is 500ms.

Code

<script lang="ts">
  import { Tooltip, Button } from '@codeatlasdev/ui';
</script>

<Tooltip content="No delay (delay=0)" delay={0}>
  {#snippet triggerChild(props)}<Button variant="glass" {...props}>Instant</Button>{/snippet}
</Tooltip>
<Tooltip content="Default delay (500ms)">
  {#snippet triggerChild(props)}<Button variant="glass" {...props}>Default</Button>{/snippet}
</Tooltip>
<Tooltip content="Long delay (1000ms)" delay={1000}>
  {#snippet triggerChild(props)}<Button variant="glass" {...props}>Slow</Button>{/snippet}
</Tooltip>

Text trigger

`children` for non-interactive content.

Static text can be a trigger too:

Code

<script lang="ts">
  import { Tooltip } from '@codeatlasdev/ui';
</script>

<p>
  Static text can be a trigger too:
  <Tooltip content="Wrapped in the tooltip's own button">hover or focus this text</Tooltip>
</p>

<style>
  p { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); }
</style>

Props

Prop	Type	Default	Description
`content`	`string`	–	Text shown in the tooltip. Required.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred placement side.
`delay`	`number`	`500`	Open delay in milliseconds.
`class`	`string`	`''`	Extra classes on the tooltip content.
`children`	`Snippet`	`undefined`	Non-interactive trigger content, wrapped in the tooltip's own button.
`triggerChild`	`Snippet<[props]>`	`undefined`	Interactive trigger. Receives the trigger `props` to spread onto a Button or IconButton.