Skip to main content Skip to docs navigation

Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

Basic example

examples

import { UncontrolledTooltip, TooltipTrigger, TooltipPopover, Button } from "@seduo/design-system";
...
<UncontrolledTooltip id="tooltip" placement="left" enableFlipping={false}>
    <TooltipTrigger elementType={Button}>
        Tooltip on left
    </TooltipTrigger>
    <TooltipPopover>
        Hello there!
    </TooltipPopover>
</UncontrolledTooltip>
...
<UncontrolledTooltip id="tooltip2" placement="bottom" enableFlipping={false}>
    <TooltipTrigger elementType={Button}>
        Tooltip on bottom
    </TooltipTrigger>
    <TooltipPopover>
        Hello there!
    </TooltipPopover>
</UncontrolledTooltip>
...
<UncontrolledTooltip id="tooltip3" placement="right" enableFlipping={false}>
    <TooltipTrigger elementType={Button}>
        Tooltip on right
    </TooltipTrigger>
    <TooltipPopover>
        Hello there!
    </TooltipPopover>
</UncontrolledTooltip>
<Tooltip>
    <Button data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-hover-left" color="primary" aria-describedby="my-tooltip-hover-left">
        Tooltip on left
    </Button>
    <TooltipPopover id="my-tooltip-hover-left" placement="left" enableFlipping={false} enableFlippingCrossAxis={false}>
        Hello there!
    </TooltipPopover>
</Tooltip>
...
<Tooltip>
    <Button data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-hover-bottom" aria-describedby="my-tooltip-hover-bottom">
        Tooltip on bottom
    </Button>
    <TooltipPopover id="my-tooltip-hover-bottom" placement="bottom" enableFlipping={false} enableFlippingCrossAxis={false}>
        Hello there!
    </TooltipPopover>
</Tooltip>
...
<Tooltip>
    <Button data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-hover-right" aria-describedby="my-tooltip-hover-right">
        Tooltip on right
    </Button>
    <TooltipPopover id="my-tooltip-hover-right" placement="right" enableFlipping={false} enableFlippingCrossAxis={false}>
        Hello there!
    </TooltipPopover>
</Tooltip>

API

Attribute Type Default Required Description
children ReactNode — Yes Tooltip children's nodes - TooltipTrigger and TooltipPopover
enableFlipping bool true No Enables flipping of the element’s placement when it starts to overflow its boundary area. For example top can be flipped to bottom.
enableFlippingCrossAxis bool true No Enables flipping on the cross axis, the axis perpendicular to main axis. For example top-end can be flipped to the top-start.
enableShifting bool true No Enables shifting of the element to keep it inside the boundary area by adjusting its position.
enableSizing bool true No Enables sizing of the element to keep it inside the boundary area by setting the max width.
flipFallbackAxisSideDirection ["none" | "start" | "end"] "none" No Whether to allow fallback to the opposite axis if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction.
flipFallbackPlacements string - No This describes a list of explicit placements to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set "top, right, bottom"
id string - Yes Tooltip id
isDismissible bool false No Make tooltip dismissible
isOpen bool - Yes Open state
onToggle () => void - Yes Function for toggle open state of dropdown
placement Placement Dictionary "bottom" No Placement of tooltip
isFocusableOnHover bool false No Allows you to mouse over a tooltip without closing it. We suggest turning off the click trigger if you use this feature.
trigger ["click" | "hover" | "manual"] ["click", "hover" ] No How tooltip is triggered: click, hover, manual. You may pass multiple triggers. If you pass manual, there will be no toggle functionality and you should provide your own toggle solution.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Dismissible tooltip

examples

import { TooltipPopover, TooltipTrigger, Tooltip, Button } from "@seduo/design-system";
...
<Tooltip id="button" placement="right" enableFlipping={false} isDismissible isOpen={isOpen} onToggle={()=> setIsOpen(!isOpen)}>
    <TooltipTrigger elementType={Button} color="primary">I have a tooltip 😎</TooltipTrigger>
    <TooltipPopover>Close me</TooltipPopover>
</Tooltip>
<Tooltip>
    <Button data-spirit-toggle="tooltip" data-spirit-target="#my-dismissible-tooltip">I have a tooltip 😎</Button>
    <TooltipPopover
            closeLabel="Close tooltip"
            id="my-dismissible-tooltip"
            placement="right-start"
            isDismissible
            isOpen
    >
        Close me
    </TooltipPopover>
</Tooltip>
On this page