Display

Tooltip

Floating label shown on hover and focus, backed by Bits UI, 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 too, but never put essential information only in a tooltip, because touch devices have no hover.

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.