Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Tooltip } from '@adaptavant/eds-core';
Default
Buttons can be wrapped in a tooltip to provide additional information about the button’s action.
The text for the tooltip can be provided via the content prop.
<Tooltip content="Copy">
{({ triggerProps }) => (
<IconButton
aria-label="Copy icon"
icon={ClipboardCopyIcon}
variant="neutralSecondary"
{...triggerProps}
/>
)}
</Tooltip>Placement
Use the placement prop to change the position of the tooltip. The default is "top".
function TriggerWithPlacement({ placement }) {
return (
<Tooltip content="Tooltip content" placement={placement}>
{({ triggerProps }) => <Button {...triggerProps}>Placement: {placement}</Button>}
</Tooltip>
);
}
return (
<Stack className="items-stretch w-full gap-4">
<div className="grid grid-cols-3 gap-4">
<TriggerWithPlacement placement="top-start" />
<TriggerWithPlacement placement="top" />
<TriggerWithPlacement placement="top-end" />
</div>
<div className="grid grid-cols-3 gap-4">
<TriggerWithPlacement placement="left" />
<div />
<TriggerWithPlacement placement="right" />
</div>
<div className="grid grid-cols-3 gap-4">
<TriggerWithPlacement placement="bottom-start" />
<TriggerWithPlacement placement="bottom" />
<TriggerWithPlacement placement="bottom-end" />
</div>
</Stack>
);Strategy
Use the strategy prop to change the CSS position property to use. This is used to pass the defined strategy to floating-ui library used in the Tooltip panel.
const [showFixedElement, setShowFixedElement] = React.useState(false);
const onButtonClick = () => {
setShowFixedElement((prevState) => !prevState)
}
return (
<Stack className="w-full gap-4">
{showFixedElement ? (
<div className="
animate-[snackbar-transition_0.3s_cubic-bezier(0.16,_1,_0.3,_1)]
bg-neutral-secondary
fixed
flex
items-center
justify-between
mx-2
p-4
right-0
rounded-8px
shadow-40
sm:right-8
sm:w-[360px]
top-8
w-[calc(100%-16px)]
z-10
">
<Tooltip content="Super important information" strategy="fixed">
{({ triggerProps }) => (
<Text href="#" {...triggerProps}>Super important...</Text>
)}
</Tooltip>
<button
className="focus-visible:focus-ring font-stronger px-1 py-0.5 rounded-4px shrink-0 text-body-12 underline underline-offset-2"
onClick={onButtonClick}
>Close</button>
</div>
) : null}
<Button onClick={onButtonClick}>
Show fixed element
</Button>
</Stack>
);MaxWidth
To customize the tooltip's maximum width, you can use the maxWidth prop.
By default, the tooltip adjusts to the width of its content. However, a maxWidth is applied to ensure it's width doesn't exceed a certain limit. The default maxWidth is set to 200px.
<Tooltip content="Lorem Ipsum is simply dummy text of the printing and typesetting industry" maxWidth='300'>
{({ triggerProps }) => (
<IconButton
aria-label="Copy icon"
icon={ClipboardCopyIcon}
variant="neutralSecondary"
{...triggerProps}
/>
)}
</Tooltip>Visibility
Use visibilityHidden prop to hide the tooltip. Probably, it can be used to hide tooltips for a disabled element.
<Tooltip content="Copy" visibilityHidden={true}>
{({ triggerProps }) => (
<IconButton
aria-label="Copy icon"
icon={ClipboardCopyIcon}
isDisabled={true}
variant="neutralSecondary"
{...triggerProps}
/>
)}
</Tooltip>Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Usage guidelines
Do
- Providing non-essential context: Use Tooltip to offer helpful, non-essential context to a UI element.
- Enhancing baseline understanding: Employ Tooltip to enhance the baseline understanding of an element or feature.
Don’t
- Critical information display: Do not use Tooltip for displaying information critical to the understanding of an element or feature. In such cases, use inline text instead.
Best practices
Do
Utilize Tooltip to succinctly describe the function of an interactive element, typically an IconButton, using as few words as possible.
Don’t
Avoid Tooltip to reiterate text that is already visible on the screen.
Do
Need to share a list? Use commas to keep it concise.
Don’t
Avoid using bulletpoints as this format isn’t possible from a code perspective.
Do
When truncating text, leave a hint to show there's more to read.
Don’t
Avoid removing all hints from the text to maintain context.