Component for displaying short information.

The <Tooltip> components allows to provide additional information to that user. For that the <Tooltip> is divided into a <Tooltip.Trigger> and the <Tooltip> itself. You need to wrap the trigger around the <Tooltip> and a simple button, which is necessary for handle actions.

You should use the <Tooltip> if you want to show helpful, short information to the user.


To import the component you just have to use this code below.

import { Tooltip } from '@marigold/components';


Sorry! There are currently no variants and sizes available.

Trigger Props

disabledbooleanfalseDisables the tooltip.
delaynumber1000Sets the delay with which the tooltip should appear.
triggerfocusundefinedSets the trigger behavior of the tooltip. Can be switched to just focus.
openbooleanundefinedSets the open state of the tooltip.
onOpenChangefunctionnoneHandles the the open state of the tooltip.
closeDelaynumber500The delay time for the tooltip to close.

Tooltip Props

offsetnumbernoneSets the offset of the tooltip.
crossOffsetnumbernoneSets the crossOffset of the tooltip.
placementtop, bottom, left, righttopSets the placement of the tooltip
shouldFlipbooleantopWhether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.


Default Tooltip

Here you can see a simple <Tooltip> use case. You can hover or tab the button to see the tooltip message.

Tooltip with custom placement

In this example the placement of the <Tooltip> is set to the right. By default it is set to the top. If there isn't enough space for the placement it moves to the bottom.

Tooltip only shows when focused

You can use the property trigger to the <Tooltip.Trigger> and setting it to focus. With that you can't hover it anymore, you have to tab in with the keyboard.

Controlled Tooltip

The open state of the tooltip can be controlled via the open and onOpenChange props.