Tooltip: React
A tooltip is a floating label that provide a brief explanation about a specific user interface element. It can be triggered when users hover or focus.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Tooltip } from '@mediahuis/chameleon-react';
export default function Example() {
return <Tooltip>Example</Tooltip>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | - | No | The trigger target of the tooltip. |
defaultVisible | Boolean | - | No | The initial visibility state of the tooltip. |
id | String | - | Yes | Native HTML id attribute. Also affects describedby-id for accessibility reasons. |
label | String | - | No | Text displayed within the tooltip. |
placement | Placement | 'top' | No | Where the Tooltip is positioned towards the target element. |
usePortal | Boolean | - | No | Whether to use React.createPortal for creating tooltip. A portal in React allows rendering a component's content into a different part of the HTML document, outside its normal parent component hierarchy. It enables rendering components at any point in the DOM tree, even outside the root element of the React application. |
tooltipTrigger | TriggerType | Unknown | Unknown | - | No | Which event or events trigger the tooltip. |