[ @sdxc/ui ]

Tooltip

A small floating label identifying an otherwise unlabeled control or adding a supplementary hint, riding the same popover-attributed host and CSS anchor positioning contract as Popover.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

View code

<Toolbar aria-label="Thread actions">
	{actions.map((action) => (
		<span key={action.id} mix={[hstack({ gap: 0, align: "center" })]}>
			<Button
				variant="ghost"
				size="sm"
				aria-label={action.label}
				aria-describedby={`preview-tip-${action.id}`}
				mix={[anchorName(`preview-tip-${action.id}`)]}
			>
				<StarIcon />
			</Button>
			<Tooltip
				id={`preview-tip-${action.id}`}
				placement={action.placement}
				mix={[positionAnchor(`preview-tip-${action.id}`)]}
			>
				{action.hint}
			</Tooltip>
		</span>
	))}
</Toolbar>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

import { Tooltip } from "@sdxc/ui";

Renders the hint through Popover, fixing popover to "hint" and role to "tooltip". The host stays present in the DOM, entering on :popover-open, :focus-visible, or the trigger's hover, animated via @starting-style.

Examples

Without an arrow

Workspace settings

View code

<span mix={[hstack({ gap: 0, align: "center" })]}>
	<LinkButton
		href="/examples/settings"
		variant="ghost"
		size="sm"
		aria-label="Settings"
		aria-describedby="settings-tooltip"
		mix={[anchorName("settings-tooltip")]}
	>
		<SettingsIcon aria-hidden="true" />
	</LinkButton>
	<Tooltip
		id="settings-tooltip"
		placement="right"
		showArrow={false}
		mix={[positionAnchor("settings-tooltip")]}
	>
		Workspace settings
	</Tooltip>
</span>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`showArrow?`	`boolean`	Whether to render a pointer-arrow child pointing back at the trigger, filled to match this host's own solid background so the two read as one continuous shape. Defaults to DEFAULT_SHOW_ARROW.

Also accepts everything in Omit<Popover.Props, "popover" | "role">.