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.

The blur behind the tooltip is --ca-tooltip-blur (default var(--ca-blur-ultra-thin)). Set --ca-tooltip-blur: none to get an opaque tooltip without touching the shared ultra-thin tier that .glass-ultra-thin and .glass-btn-clear also use.

#145

All sides

top, right, bottom and left placement.

Reference #145 · Pick in the gallery

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>

#144

On icon buttons

Gives icon-only buttons a visible label.

Reference #144 · Pick in the gallery

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>

#143

Custom delay

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

Reference #143 · Pick in the gallery

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>

#142

Text trigger

`children` for non-interactive content.

Static text can be a trigger too:

Reference #142 · Pick in the gallery

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.