Tooltip

Default


You can define the tooltip placement sending the prop placement with one of the available options: top | right | bottom | left.

If you don't specify a desired placement, the component will automatically choose the one that fits better.

If the desired placement doesn't fit on screen, the component will automatically switch to the one that fits better.

Content Interaction


Set the prop interaction as true for cases that require users to copy the content inside the tooltip.

Margin


You should set margin in the tooltip component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.

It is not recommended to set padding in the tooltip nor its child, doing so will cause it to be pulled away from its trigger element.

Tooltip with Icon


Set the prop icon with the desired icon to display inside the tooltip.

Delay


Waits for the specified time when the event listener runs before triggering the tooltip.

The delay accepts number in ms or an object with open and close properties.

The default is 0.

Show Tooltip


You can build your own logic to control whether to show the tooltip using the showTooltip prop. Its default value is true.

Click on the Toggle state button to change the state of the component and hover over the 'hover me' text to see it in action.


Available Props