Tooltip
Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.
Version 3.5.6
StorybookInstallation
To install @igloo-ui/tooltip in your project, you will need to run the following command using npm:
npm install @igloo-ui/tooltip
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/tooltip
Usage
Then to use the component in your code just import it!
import Tooltip from '@igloo-ui/tooltip';
<Tooltip content="Lorem ipsum dolor">Element</Tooltip>;
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The target button, text, svg etc.. of the Tooltip. |
tooltipClassName | string | - | Add a specific class to the tooltip |
content | ReactNode | - | The content to display inside the tooltip |
position | Position | The position the tooltip is on. | |
appearance | Appearance | The appearance of the tooltip. | |
maxWidth | number | The max with of the tooltip | |
active | boolean | When True, manually show the Tooltip. | |
disabled | boolean | - | When True, disabled the tooltip |
dataTest | string | - | Add a data-test tag for automated tests |
showOnMobile | boolean | When True, display the tooltip on a mobile device |