Component reference
Tooltip
Supplementary context on a focusable trigger.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Button, Tooltip } from "@pimolu/react";
export function TooltipExample() {
const [saved, setSaved] = useState(false);
return (
<Tooltip
content="Keep this idea in your workspace."
placement="top"
delay={150}
arrow
>
<Button
appearance="outline"
aria-pressed={saved}
onClick={() => setSaved(!saved)}
>
{
saved
? "Idea saved"
: "Save this idea"
}
</Button>
</Tooltip>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Placement
Four sides, a caret, and an automatic flip when the preferred side has no room.
Timing
delay is in milliseconds; disabled never opens.
Examples
Real compositions built from the same parts.
Usage
Wrap a single child that forwards props and a ref. Placement is preferred rather than guaranteed: the bubble can flip when space is limited.
Keep tooltip content brief and non-interactive. Use Popover for links or controls, and avoid essential instructions that touch-only users cannot reliably discover.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTooltipProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
contentRequired | ReactNode | — | Content of the bubble. |
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The single element the tooltip describes: any element, or a component that passes down the props it receives. It gets the ARIA description, the event handlers and the ref, and the handlers it already had keep working. |
placement | PimoluTooltipPlacement | undefined | "top"; the bubble flips to the opposite side when there is not enough room | Preferred side. Defaults to "top"; the bubble flips to the opposite side when there is not enough room. |
arrow | boolean | undefined | false | Draw a caret pointing at the trigger. Defaults to false. |
delay | number | undefined | 500 | Delay before opening, in milliseconds. Defaults to 500. |
disabled | boolean | undefined | false | Never open. |
className | string | undefined | — | Class applied to the bubble. |
contentRequiredReactNodeNo default extracted.
Content of the bubble.
childrenRequiredReactElement<unknown, string | JSXElementConstructor<any>>No default extracted.
The single element the tooltip describes: any element, or a component that passes down the props it receives. It gets the ARIA description, the event handlers and the ref, and the handlers it already had keep working.
placementPimoluTooltipPlacement | undefinedDefault: "top"; the bubble flips to the opposite side when there is not enough room
Preferred side. Defaults to "top"; the bubble flips to the opposite side when there is not enough room.
arrowboolean | undefinedDefault: false
Draw a caret pointing at the trigger. Defaults to false.
delaynumber | undefinedDefault: 500
Delay before opening, in milliseconds. Defaults to 500.
disabledboolean | undefinedDefault: false
Never open.
classNamestring | undefinedNo default extracted.
Class applied to the bubble.
Accessibility
- The trigger needs its own name; the tooltip adds an accessible description.
- Check keyboard focus, hover and Escape. Do not use a tooltip as the sole label or an error message.