Tooltip

Hover or focus disclosure for short helper text, plus Infotip for standalone info triggers.

Quick Preview

Pick by the purpose of the trigger element:

Tooltip — the trigger's purpose is unrelated to opening the popup (a button, an icon control). The tooltip labels or annotates it, opens on hover or keyboard focus only, closes when the trigger is clicked, and is never interactive.
Infotip — the trigger's only purpose is to open the popup (an info icon next to a label). It is a popover under the hood (openOnHover), so touch users can tap it and screen reader users can reach its content.

Composition

Use these public compositions:

Tooltip                 Infotip
├── TooltipTrigger      ├── InfotipTrigger
└── TooltipContent      └── InfotipContent

Usage

import { Tooltip, TooltipContent, TooltipTrigger } from "@giddaa-housing/ui/tooltip";
import { Infotip, InfotipContent, InfotipTrigger } from "@giddaa-housing/ui/infotip";

<Tooltip><TooltipTrigger render={<Button />}>Save</TooltipTrigger><TooltipContent>Save changes</TooltipContent></Tooltip>

<Infotip><InfotipTrigger aria-label="About fees"><Info /></InfotipTrigger><InfotipContent>Fees are charged yearly.</InfotipContent></Infotip>

Examples

Use this as the starting point for Tooltip. Keep product data, routing, fetching, and authorization logic in the consuming app.

Infotip

An info icon whose only job is revealing the explanation. Unlike Tooltip, the popup stays open while hovered, can be opened by tap or click, and is exposed to assistive technology as a popover.

Verification status

Props

Both components share the same content props:

Prop/API	Type	Default	Description
`side`	position side	`"top"`	Preferred side for content.
`showArrow`	`boolean`	`true`	Renders arrow pointer.
`container`	`HTMLElement`	-	Portal target (e.g. a fullscreen element).
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Behavioral differences:

	Tooltip	Infotip
Underlying primitive	Base UI `Tooltip`	Base UI `Popover` (`openOnHover`)
Opens on	hover, keyboard focus	hover, click/tap, keyboard focus
Popup interactive	no (`pointer-events: none`)	yes (hoverable, selectable)
Closes on trigger click	yes	no (click toggles)

Accessibility

Use Tooltip only to label or annotate a control that has its own purpose; the popup content must never be required to operate the control.
Use Infotip when the content must be reachable on touch devices and by screen readers — tooltips are hover/focus-only.
Give icon-only Infotip triggers an aria-label.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.