CwTooltip

Short descriptions that appear on hover and on keyboard focus. The bubble is linked to its trigger with aria-describedby, stays open while the pointer moves onto it, and closes with Escape.

Positions

Tooltip on top Tooltip on bottom Tooltip on left Tooltip on right
CwTooltip example Copy code 
<CwTooltip value="Tooltip on top" position="top">
	<CwButton variant="secondary">Top</CwButton>
</CwTooltip>

Tones

Primary tone Secondary tone Info tone (default) Warning — heads up! Danger — careful! Success — all good

Keyboard

Tab to a trigger to show its tooltip, then press Escape to hide it without moving focus.

Exports the last 24 hours as CSV Readings refresh every 5 minutes

On inline text

Hover or focus Vapour pressure deficit to see a tooltip on inline content. Use a focusable element so keyboard users can reach it.

API

Usage and API reference

CwTooltip wraps an existing trigger element and shows short, contextual guidance on hover or focus. Keep the copy concise and use it for hints, not large descriptions.

How to think about it

  1. Wrap the trigger element The child content can be a button, icon, link, or inline text span.
  2. Keep the value short Tooltips should clarify or name something quickly. If the content needs paragraphs or interactions, use a dialog or popover pattern instead.
  3. Choose position and tone only when they add clarity `top` and `info` are the defaults, so only override them when the surrounding layout or message calls for it.

Props and callbacks

APITypeDetails
value Required
stringTooltip text content.
position

Default: top

'top' | 'bottom' | 'left' | 'right'Placement relative to the trigger.
tone

Default: info

CwToneTooltip color theme.
children Required
SnippetWrapped trigger content.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Default button tooltip

The default position is `top` and the default tone is `info`.

Default button tooltip Copy code 
<CwTooltip value="Refresh the dashboard data">
	<CwButton variant="secondary">Refresh</CwButton>
</CwTooltip>
Inline warning tooltip

Tooltips can also wrap inline text, not just buttons.

Inline warning tooltip Copy code 
<p>
	Sensor status:
	<CwTooltip value="No device data has arrived in the last 30 minutes." tone="warning" position="right">
		<span style="text-decoration:underline dotted;cursor:help">stale</span>
	</CwTooltip>
</p>