DismissibleTooltip

A dismissible tooltip component that displays content in a positioned bubble with an element. Unlike traditional tooltips, this component is always visible when open and can safely wrap interactive elements without additional button wrappers.

Basic usage

Demonstrates the essential props: content, placement, and initialOpen.

Placement

Shows different placement options and arrowPosition configurations.

Without parent wrapper

Uses withoutParentWrapper to disable the default positioning wrapper.

Custom width and whitespace

Demonstrates twWidth and twWhiteSpace props for controlling bubble dimensions and text wrapping.

Adjust positioning

Uses twTranslate to fine-tune the bubble's position with CSS transforms.

Notes

The component renders open only when initialOpen is true. Positioning relies on regular CSS positioning rules. If you disable the parent wrapper with withoutParentWrapper, ensure you have an appropriately positioned ancestor for the bubble to anchor to.