Tooltip
import { Tooltip } from '@enmovil/ui-design-system';
Shows a short text tip when the user hovers over its children. Set where it appears with placement, and hide the arrow with isArrow.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
className | string | No | — | — | Extra CSS class added to the wrapped child element, not to the tooltip itself. |
title | string | No | — | — | Text shown in the tooltip. Nothing is shown when it is empty. |
isArrow | boolean | No | true | — | Shows the arrow pointing at the child. On by default; set it to false to hide the arrow. |
placement | string | Yes | — | 'bottomLeft', 'bottomRight', 'topLeft', 'topRight', 'left', 'right', 'top', 'bottom', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom' | Where the tooltip appears relative to its child, such as top, bottomLeft or right. |
Other attributes
Tooltip passes 39 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onOpenChange | ((visible: boolean) => void) | Fires when the tooltip starts to show or hide. Useful to load its content lazily or for analytics. |
afterOpenChange | ((visible: boolean) => void) | Fires once the show or hide animation has finished. |
Children
children (ReactNode): —
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Tooltip Bottom example.
Loading playground…
Storybook
Open Tooltip in Storybook to try every story with the full set of controls.