Show full date in a tooltip

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
View old example docs