Welcome UI logo

Tooltip

The Tooltip component is a small, interactive UI element that provides contextual information or descriptions when users hover over an element or focus on it. It enhances user experience by offering additional guidance or clarifications without cluttering the main interface. Tooltips are commonly used for icons, buttons, links, and other interactive elements to improve accessibility and usability.

SourceBuilt with Ariakit
OverviewProps

Tooltip

content
Required

string | Element

fixed

Boolean | undefined = false

Whether the popover has `position: fixed` or not.

gutter

number | undefined = 8

The distance between the popover and the anchor element. Live examples: - [Combobox filtering](https://ariakit.org/examples/combobox-filtering) - [Form with Select](https://ariakit.org/examples/form-select) - [Hovercard with keyboard support](https://ariakit.org/examples/hovercard-disclosure) - [MenuItemRadio](https://ariakit.org/examples/menu-item-radio) - [Submenu](https://ariakit.org/examples/menu-nested) - [Toolbar with Select](https://ariakit.org/examples/toolbar-select)

placement

"top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "left-start" | "right-start" | "top-end" | "bottom-end" | "left-end" | "right-end" | undefined = fixed ? top : bottom

withArrow

Boolean | undefined = false

PopoverText