Implementation:OpenHands OpenHands Tooltip
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
A floating tooltip component supporting hover and click triggers, optional arrow, configurable placement, and both controlled and uncontrolled modes.
Description
The Tooltip component displays a floating text overlay adjacent to its trigger element. It supports two trigger modes ("hover" and "click"), an optional decorative arrow via withArrow, and configurable placement using @floating-ui/react positioning options. The component can operate in either controlled mode (with explicit open and onOpenChange props) or uncontrolled mode (managing its own visibility state internally). The source file is 133 lines long.
Usage
Use the Tooltip to provide supplementary information about interface elements, such as icon button labels, abbreviated text explanations, or keyboard shortcut hints. It should be used for short, non-essential information that enhances understanding without being required for the primary interaction.
Code Reference
Source Location
openhands-ui/components/tooltip/Tooltip.tsx (133 lines)
Signature
interface TooltipProps {
text: string;
withArrow?: boolean;
placement?: FloatingOptions["placement"];
trigger?: "hover" | "click";
open?: boolean;
onOpenChange?: (open: boolean) => void;
children: React.ReactNode;
}
Import
import { Tooltip } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
text |
string |
Yes | — | The text content displayed inside the tooltip. |
withArrow |
boolean |
No | false |
Whether to render a decorative arrow pointing from the tooltip to the trigger element. |
placement |
FloatingOptions["placement"] |
No | "top" |
The preferred placement of the tooltip relative to the trigger (e.g., "top", "bottom", "left", "right").
|
trigger |
"hover" | "click" |
No | "hover" |
The interaction that opens the tooltip. |
open |
boolean |
No | — | Controlled mode: explicitly sets whether the tooltip is visible. |
onOpenChange |
(open: boolean) => void |
No | — | Controlled mode: callback invoked when the tooltip visibility should change. |
Outputs
Renders the trigger children normally, and when activated (by hover or click), displays a floating tooltip overlay with the specified text, optional arrow, and configured placement. The tooltip is rendered in a portal to avoid clipping issues.
Usage Examples
import { Tooltip } from "@openhands/ui";
import { Button } from "@openhands/ui";
import { InfoIcon } from "@openhands/icons";
function IconWithTooltip() {
return (
<Tooltip text="More information about this feature" placement="right" withArrow>
<InfoIcon />
</Tooltip>
);
}
function ClickTooltip() {
return (
<Tooltip text="Copied to clipboard!" trigger="click" placement="bottom">
<Button>Copy Link</Button>
</Tooltip>
);
}