Back to all examples

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>

Display relative time (like “4 hours ago”) while providing the full date and time on hover via tooltip for users who need exact timestamps.

When to use

Use this pattern when:

  • Displaying relative time like “4 hours ago” or “2 days ago”
  • Users may need access to the exact date and time
  • Space is limited for full date display
  • Context cards or comments show timestamps

Considerations

  • Keep the relative time format consistent
  • Include both date and time in the tooltip
  • Style the hoverable text subtly (secondary color, smaller font)
  • Ensure tooltip is keyboard accessible