Igloo branding

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.

Installation

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

PropTypeDescription
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
showOnMobilebooleanWhen True, display the tooltip on a mobile device