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

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

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

Save

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.

Props

Slots

Copy to clipboard

Show a label on an icon only button

Show full date in a tooltip

Other