Tooltip
Tooltip is a neobrutalist React component from Cruise UI. A short hint on hover and focus. Hard-edged, no fade. Install it with npx shadcn@latest add @cruiseui/tooltip.
Install
Terminal
npx shadcn@latest add @cruiseui/tooltipFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Worked out from your address at checkout.
import { Info } from "lucide-react";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseTooltip } from "@/components/cruise/tooltip";
export default function TooltipExample() {
return (
<div className="pt-12">
<CruiseTooltip content="Worked out from your address at checkout.">
<CruiseButton variant="secondary">
<Info aria-hidden="true" />
Delivery fee
</CruiseButton>
</CruiseTooltip>
</div>
);
}
<span class="tooltip-wrap">
<button type="button" class="brutal btn btn-secondary" aria-describedby="fee-tip" data-tooltip>Delivery fee</button>
<span role="tooltip" id="fee-tip" class="tooltip" hidden>Worked out from your address at checkout.</span>
</span>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
A short hint about a control: what an icon button does, how a fee is worked out.
When not to
Anything people must know. Phones and keyboards may never show it; put it on the page.
Props
CruiseTooltip
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | — | — |
children | ReactElement<{ "aria-describedby"?: string | undefined; }, string | JSXElementConstructor<any>> | — | — |
Accessibility
- Opens on hover AND keyboard focus (after ~300ms), closes with Esc, toggles on tap.
- role="tooltip"; the trigger points to it with aria-describedby.