Tooltip
A small popover that displays more information about an item.
Props
content
string | ReactNode
The content of the tooltip. Accepts plain text or rich content.
hAlign
GoabTooltipHorizontalAlignment
Horizontal alignment of the tooltip relative to the child element.
Defaults to
center.
maxWidth
string
Sets the maximum width of the tooltip. Must use 'px' unit.
position
GoabTooltipPosition
Position of the tooltip with respect to the child element.
Defaults to
top.
testId
string
Sets a data-testid attribute for automated testing.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
ReactNode
content
ReactNode
The content of the tooltip. Accepts plain text or rich content.
Copy to clipboard
.token-block {
background-color: var(--goa-color-interactive-default);
height: 22px;
width: 24px;
border-radius: var(--goa-border-radius-s);
}const [isCopied, setIsCopied] = useState(false);
function copyCode() {
const codeToCopy = "$goa-color-interactive-default";
navigator.clipboard.writeText(codeToCopy).then(() => {
setIsCopied(true);
setTimeout(() => setIsCopied(false), 1000);
});
}<GoabBlock alignment="center">
<div className="token-block" />
<span>$goa-color-interactive-default</span>
<GoabTooltip content={isCopied ? "Copied" : "Copy?"} position="top">
<GoabIconButton icon="copy" onClick={copyCode} mt="2xs" />
</GoabTooltip>
</GoabBlock>isCopied = false;
copyCode(): void {
const codeToCopy = "$goa-color-interactive-default";
navigator.clipboard.writeText(codeToCopy).then(() => {
this.isCopied = true;
setTimeout(() => (this.isCopied = false), 1000);
});
}<goab-block alignment="center" gap="s">
<div class="token-block"></div>
<span>$goa-color-interactive-default</span>
<goab-tooltip [content]="isCopied ? 'Copied' : 'Copy?'" position="top">
<goab-icon-button icon="copy" (onClick)="copyCode()" mt="2xs"></goab-icon-button>
</goab-tooltip>
</goab-block>.token-block {
background-color: var(--goa-color-interactive-default);
height: 22px;
width: 24px;
border-radius: var(--goa-border-radius-s);
}const copyBtn = document.getElementById("copy-btn");
const tooltip = document.getElementById("copy-tooltip");
function copyCode() {
const codeToCopy = "$goa-color-interactive-default";
navigator.clipboard.writeText(codeToCopy).then(() => {
tooltip.setAttribute("content", "Copied");
setTimeout(() => {
tooltip.setAttribute("content", "Copy?");
}, 1000);
});
}
copyBtn.addEventListener("_click", copyCode);<goa-block alignment="center">
<div class="token-block"></div>
<span>$goa-color-interactive-default</span>
<goa-tooltip id="copy-tooltip" content="Copy?" position="top">
<goa-icon-button id="copy-btn" icon="copy" mt="2xs"></goa-icon-button>
</goa-tooltip>
</goa-block>Show a label on an icon only button
<GoabButtonGroup alignment="start">
<GoabTooltip content="Edit">
<GoabIconButton icon="pencil" ariaLabel="Edit" />
</GoabTooltip>
<GoabTooltip content="Alerts">
<GoabIconButton icon="notifications" ariaLabel="Alerts" />
</GoabTooltip>
<GoabTooltip content="Settings">
<GoabIconButton icon="settings" ariaLabel="Settings" />
</GoabTooltip>
</GoabButtonGroup><goab-button-group alignment="start">
<goab-tooltip content="Edit">
<goab-icon-button icon="pencil" ariaLabel="Edit"></goab-icon-button>
</goab-tooltip>
<goab-tooltip content="Alerts">
<goab-icon-button icon="notifications" ariaLabel="Alerts"></goab-icon-button>
</goab-tooltip>
<goab-tooltip content="Settings">
<goab-icon-button icon="settings" ariaLabel="Settings"></goab-icon-button>
</goab-tooltip>
</goab-button-group><goa-button-group alignment="start">
<goa-tooltip content="Edit">
<goa-icon-button icon="pencil" aria-label="Edit"></goa-icon-button>
</goa-tooltip>
<goa-tooltip content="Alerts">
<goa-icon-button icon="notifications" aria-label="Alerts"></goa-icon-button>
</goa-tooltip>
<goa-tooltip content="Settings">
<goa-icon-button icon="settings" aria-label="Settings"></goa-icon-button>
</goa-tooltip>
</goa-button-group>Show full date in a tooltip
<GoabContainer
type="non-interactive"
accent="thick"
heading={
<span>
Joan Smith
<GoabTooltip content="Nov 23, 2023 at 10:35 am">
<span
style={{
color: "var(--goa-color-text-secondary)",
font: "var(--goa-typography-body-xs)",
}}
>
4 hours ago
</span>
</GoabTooltip>
</span>
}
>
<GoabText tag="p" size="body-m" mt="none" mb="none">
Hover on the time it was added to see the full date and time.
</GoabText>
</GoabContainer><goab-container type="non-interactive" accent="thick" [title]="containerTitle">
<ng-template #containerTitle>
Joan Smith
<goab-tooltip content="Nov 23, 2023 at 10:35 am">
<span
style="
color: var(--goa-color-text-secondary);
font: var(--goa-typography-body-xs);
"
>
4 hours ago
</span>
</goab-tooltip>
</ng-template>
<goab-text tag="p" size="body-m" mt="none" mb="none"
>Hover on the time it was added to see the full date and time.</goab-text
>
</goab-container><goa-container type="non-interactive" accent="thick">
<div slot="title">
Joan Smith
<goa-tooltip content="Nov 23, 2023 at 10:35 am">
<span
style="
color: var(--goa-color-text-secondary);
font: var(--goa-typography-body-xs);
"
>
4 hours ago
</span>
</goa-tooltip>
</div>
<goa-text as="p" size="body-m" mt="none" mb="none"
>Hover on the time it was added to see the full date and time.</goa-text
>
</goa-container>Other
Don't
Don't use tooltips to communicate essential information such as required field indicators, error messages, critical instructions, or information needed to complete a task.
Do
Use tooltips for additional context that enhances understanding, definitions of terms, or keyboard shortcuts.
Feedback
Do
Use tooltips to describe an icon button and provide clarity on what the icon button will do.
Don't
Don't position a tooltip in a way that forces the user to scroll to view the tooltip content.
Don't
Don't use tooltips inconsistently; if one icon button has a tooltip, the rest of the icon buttons must also have tooltips.
Don't
Don't add more than 140 characters to a tooltip; for lengthy information use the details component.
Tooltip
Don't
Don't position a tooltip too far from the element.
Don't
Don't use tooltips for information that is vital to task completion.
