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 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

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

<a href="/settings" popovertarget="settings-tooltip" aria-describedby="settings-tooltip">
	<GearIcon aria-hidden />
</a>
<Tooltip id="settings-tooltip" placement="right" showArrow={false}>
	{t("nav.settings")}
</Tooltip>

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">.