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.


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


Then to use the component in your code just import it!

import Tooltip from '@igloo-ui/tooltip';

<Tooltip content="Lorem ipsum dolor">Element</Tooltip>;


childrenReactNodeThe target button, text, svg etc.. of the Tooltip.
tooltipClassNamestringAdd a specific class to the tooltip
contentReactNodeThe content to display inside the tooltip
positionPositionThe position the tooltip is on.
appearanceAppearanceThe appearance of the tooltip.
maxWidthnumberThe max with of the tooltip
activebooleanWhen True, manually show the Tooltip.
disabledbooleanWhen True, disabled the tooltip
dataTeststringAdd a data-test tag for automated tests