Tooltip
A small popover that displays more information about an item.
Props
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.
Slots
content
The content of the tooltip. Accepts a string or a ReactNode.
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>.token-block {
background-color: var(--goa-color-interactive-default);
height: 22px;
width: 24px;
border-radius: var(--goa-border-radius-s);
}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 as="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 as="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="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.
