Tooltip

A small popover that displays more information about an item.

Props

content
any
The content of the tooltip.
testId
string
Sets a data-testid attribute for automated testing.
position
top | bottom | left | right
Position with respect to the child element.
Defaults to top.
halign
left | right | center
Horizontal alignment to the child element.
Defaults to center.
maxWidth
string
Sets the maximum width of the tooltip. Must use 'px' unit.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.

Slots

content
Named slot for content
 Examples

Copy to clipboard

ReactAngularWeb Components
.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>

Show a label on an icon only button

ReactAngularWeb Components
<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>

Show full date in a tooltip

ReactAngularWeb Components
<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>

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.
Save
Do
Use tooltips for additional context that enhances understanding, definitions of terms, or keyboard shortcuts.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.