CwTooltip

Hover tooltips with position and tone variants.

Positions

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

Tones

On Inline Text

Hover over this word to see a tooltip on inline content.

Documentation Upgrade

Start here

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

These snippets intentionally show the full public API surface the live demo relies on.

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>