Tooltip
Hover/focus hint text.
Usage
Wrap all tooltips in a single Tooltip.Provider — it manages shared
delay timing and the "skip delay" behaviour when moving between triggers quickly. The child snippet on Tooltip.Trigger renders any focusable
element as the anchor.
Badge with tooltip
Placement
The side prop on Tooltip.Content controls preferred
placement. Like all floating elements, it auto-flips near viewport edges.
Props
Tooltip.Provider
| Prop | Type | Default |
|---|---|---|
children bits-ui | Snippet<[]> | undefined | — |
delayDuration bits-ui The delay in milliseconds before the tooltip opens. | number | undefined | 700 |
disableCloseOnTriggerClick bits-ui When `true`, the tooltip will not close when you click on the trigger. | boolean | undefined | false |
disabled bits-ui When `true`, the tooltip will be disabled and will not open. | boolean | undefined | false |
disableHoverableContent bits-ui Prevents tooltip from remaining open when hovering over the content. | boolean | undefined | false |
ignoreNonKeyboardFocus bits-ui Prevent the tooltip from opening if the focus did not come using the keyboard. | boolean | undefined | false |
skipDelayDuration bits-ui How much time a user has to enter another trigger without incurring a delay again. | number | undefined | 300 |
Tooltip.Root
| Prop | Type | Default |
|---|---|---|
children bits-ui | Snippet<[]> | Snippet<[TooltipRootSnippetProps<never>]> | undefined | — |
delayDuration bits-ui The delay in milliseconds before the tooltip opens. | number | undefined | 700 |
disableCloseOnTriggerClick bits-ui When `true`, the tooltip will not close when you click on the trigger. | boolean | undefined | false |
disabled bits-ui When `true`, the tooltip will be disabled and will not open. | boolean | undefined | false |
disableHoverableContent bits-ui Prevents tooltip from remaining open when hovering over the content. | boolean | undefined | false |
ignoreNonKeyboardFocus bits-ui Prevent the tooltip from opening if the focus did not come using the keyboard. | boolean | undefined | false |
onOpenChange bits-ui A callback that will be called when the tooltip is opened or closed. | OnChangeFn<boolean> | undefined | — |
onOpenChangeComplete bits-ui A callback that will be called when the tooltip is opened or closed. | OnChangeFn<boolean> | undefined | — |
open bits-ui The open state of the tooltip. | boolean | undefined | false |
tether bits-ui Shared tether used to connect detached triggers and infer payload types. | TooltipTether<never> | undefined | — |
triggerId bits-ui The active trigger id for controlled single tooltip mode. | string | null | undefined | — |
Tooltip.Trigger
| Prop | Type | Default |
|---|---|---|
child bits-ui | Snippet<[{ props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
disabled bits-ui Whether the tooltip trigger is disabled or not. | boolean | null | undefined | false |
id bits-ui | string | undefined | — |
payload bits-ui Payload for the trigger used by singleton tooltip root snippets. | unknown | — |
ref bits-ui | HTMLElement | null | undefined | — |
tether bits-ui Shared tether used to connect detached triggers and infer payload types. | TooltipTether<never> | undefined | — |
Tooltip.Content
| Prop | Type | Default |
|---|---|---|
class | string | — |
align bits-ui The preferred alignment of the anchor to render against when open. This may change when collisions occur. | "start" | "center" | "end" | undefined | — |
alignOffset bits-ui An offset in pixels from the "start" or "end" alignment options. | number | undefined | — |
arrowPadding bits-ui This describes the padding between the arrow and the edges of the floating element. If your floating element has border-radius, this will prevent it from overflowing the corners. | number | undefined | — |
avoidCollisions bits-ui When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. | boolean | undefined | true |
child bits-ui | Snippet<[FloatingContentSnippetProps & { props: Record<string, unknown>; }]> | undefined | — |
children bits-ui | Snippet<[]> | undefined | — |
collisionBoundary bits-ui A boundary element or array of elements to check for collisions against. | Arrayable<Boundary> | undefined | — |
collisionPadding bits-ui The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | undefined | 8 |
customAnchor bits-ui Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger. You can pass a selector string or an HTMLElement. | string | HTMLElement | Measurable | null | undefined | — |
dir bits-ui The text direction of the content. | Direction | undefined | — |
escapeKeydownBehavior bits-ui Escape behavior type. `close`: Closes the element immediately. `defer-otherwise-close`: Delegates the action to its parent component that has an escape keydown handler. If no parent is found, it closes the element. `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done. `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an escape key press. | EscapeBehaviorType | undefined | `close` |
forceMount bits-ui When `true`, the tooltip will be forced to mount in the DOM. Useful for more control over the transition behavior. | boolean | undefined | — |
hideWhenDetached bits-ui | boolean | undefined | — |
id bits-ui | string | undefined | — |
interactOutsideBehavior bits-ui Interact outside behavior type. `close`: Closes the element immediately. `defer-otherwise-close`: Delegates the action to the parent element. If no parent is found, it closes the element. `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done. `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an outside interaction. | InteractOutsideBehaviorType | undefined | `close` |
onEscapeKeydown bits-ui Callback fired when escape is pressed. | ((e: KeyboardEvent) => void) | undefined | — |
onFocusOutside bits-ui Callback fired when focus leaves the dismissible layer. | ((event: FocusEvent) => void) | undefined | — |
onInteractOutside bits-ui Callback fired when an outside interaction event completes, which is either a `pointerup`, `mouseup`, or `touchend` event, depending on the user's input device. | InteractOutsideEventHandler | undefined | — |
ref bits-ui | HTMLElement | null | undefined | — |
side bits-ui The preferred side of the anchor to render against when open. Will be reversed when collisions occur. | "top" | "right" | "bottom" | "left" | undefined | — |
sideOffset bits-ui The distance in pixels from the anchor to the floating element. | number | undefined | — |
sticky bits-ui | "partial" | "always" | undefined | — |
strategy bits-ui The positioning strategy to use for the floating element. | "absolute" | "fixed" | undefined | — |
updatePositionStrategy bits-ui "optimized" will only update the position when necessary, while "always" will update the position on each animation frame, which is useful if the floating content is following something like a mouse cursor. | "always" | "optimized" | undefined | "optimized" |
Built on bits-ui — all underlying Bits UI Tooltip props are forwarded transparently.