Live code
Storybook
Usage
Tooltip
Tooltips are used to provide additional information about an element when the user hovers over it or clicks on it.
Tooltip
import React, { useState } from 'react';
import { Tooltip, TooltipTrigger, TooltipPopover } from '@alma-oss/spirit-web-react';
export const Example = () => {
const [open, setOpen] = useState(false);
return (
<Tooltip id="tooltip" isOpen={open} onToggle={setOpen}>
<TooltipTrigger>I have a tooltip!</TooltipTrigger>
<TooltipPopover>Hello there!</TooltipPopover>
</Tooltip>
);
};Dismissible
To display close button, add isDismissible prop to the Tooltip component.
import React, { useState } from 'react';
import { Button, Tooltip, TooltipTrigger, TooltipPopover, Button } from '@alma-oss/spirit-web-react';
export const Example = () => {
const [open, setOpen] = useState(false);
return (
<Tooltip id="tooltip-dismissible" isOpen={open} onToggle={setOpen} placement="right" isDismissible>
<TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
<TooltipPopover>Close me</TooltipPopover>
</Tooltip>
);
};API
| Attribute | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | — | ✓ | Tooltip children's nodes - TooltipTrigger and TooltipPopover |
| elementType | ElementType | "div" | ✕ | Type of the element |
| enableFlipping | bool | true | ✕ | 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 | ✕ | 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 | ✕ | Enables shifting of the element to keep it inside the boundary area by adjusting its position. |
| enableSizing | bool | true | ✕ | Enables sizing of the element to keep it inside the boundary area by setting the max width. |
| flipFallbackAxisSideDirection | [none | start | end] | "none" | ✕ | 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 | - | ✕ | 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 | - | ✓ | Tooltip id |
| isDismissible | bool | false | ✕ | Make tooltip dismissible |
| isFocusableOnHover | bool | false | ✕ | Allows you to mouse over a tooltip without closing it. We suggest turning off the click trigger if you use this feature. |
| isOpen | bool | - | ✓ | Open state |
| onToggle | () => void | - | ✓ | Function for toggle open state of dropdown |
| placement | Placement Dictionary | "bottom" | ✕ | Placement of tooltip |
| positionStrategy | [absolute | fixed] (Strategy type) | "absolute" | ✕ | This is the type of CSS position property to use. |
| trigger | [click | hover | focus | manual] | ["click", "hover" ] | ✕ | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers. If you pass manual, there will be no toggle functionality and you should provide your own toggle solution. The focus trigger shows the tooltip when the trigger element is focused (e.g., via Tab key). |
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.
TooltipTrigger
You can choose whether you want to open the tooltip on click, hover, and/or focus. By default, both click and hover options are active, e.g., trigger={['click', 'hover']}. If you only want the click trigger, you need to specify the trigger, as shown in the example below. This setup might be preferable when you have a link in your tooltip, for example. The focus trigger is useful for accessibility, showing the tooltip when users navigate to the trigger element using the keyboard (Tab key).
👉 For the focus trigger to work properly, the trigger element must be focusable. If you're using a non-focusable element (like a div or span), make sure to add tabIndex={0} to make it keyboard accessible.
👉 'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.
import React, { useState } from 'react';
import { Button, Tooltip, TooltipTrigger, TooltipPopover, Button } from '@alma-oss/spirit-web-react';
export const Example = () => {
const [open, setOpen] = useState(false);
return (
<Tooltip
id="TooltipTrigger"
isOpen={open}
onToggle={setOpen}
trigger={['click']} // Only `click` trigger is active now.
>
<TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
<TooltipPopover>
You can click on the link: <a href="#">Link to unknown</a>
</TooltipPopover>
</Tooltip>
);
};API
| Attribute | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | — | ✓ | TooltipTrigger children's nodes` |
| elementType | ElementType | "button" | ✕ | Type of element used as trigger |
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.
Icons
This component uses the Icon component internally. To ensure correct rendering, please refer to the Icon component documentation for setup instructions.