Tooltip
A hint shown on hover and focus.
Wrap a single trigger element in Tooltip — it must accept a ref and event handlers (Button, a link, an SVG element). The tooltip appears on hover after delay and immediately on keyboard focus. placement sets the side (top by default); the tooltip flips when space runs out. arrow shows an arrow. maxWidth limits the tooltip width (320px by default; a number is pixels, a string is any CSS value). Inside <svg> or a container with overflow: hidden, turn on portal. A tooltip does not replace an accessible name: keep aria-label on icon-only buttons.
Live example
Example controls
Usage
import { ArrowUpIcon } from '@heroicons/react/24/outline';
import { Button, Tooltip } from '@prosazhin/pbcomponents';
<Tooltip
content='Back to top'
placement='left'
>
<Button
theme='ghost'
leftIcon={ArrowUpIcon}
aria-label='Back to top'
/>
</Tooltip>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | ReactElement | Trigger element; must accept a ref and event handlers. | — |
content | ReactNode | Tooltip text. | — |
placement | PopoverPlacementtop · top-start · top-end · bottom · bottom-start · bottom-end · left · left-start · left-end · right · right-start · right-end | Side and alignment relative to the trigger: top, bottom-start, right-end, etc. The popup flips and shifts when space runs out. | top |
arrow | boolean | Arrow pointing at the trigger. | true |
open | boolean | Controlled open state. | — |
defaultOpen | boolean | Initial open state when uncontrolled. | false |
onOpenChange | (open: boolean) => void | Called when the popup opens or closes. | — |
delay | number | Hover delay before showing, in milliseconds. | 200 |
disabled | boolean | Disables the tooltip. | false |
portal | boolean | Renders the tooltip into a portal — needed, for example, inside SVG or overflow: hidden. | false |
maxWidth | number | string | Maximum tooltip width: a number is pixels, a string is any CSS value. Never wider than the screen. | 320 |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.