Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA relative time such as 3 hours ago, in a real time element, with the exact date and time in a tooltip, in its description and reachable by keyboard.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this in activity feeds, comments and tables where "3 hours ago" is friendlier but the exact time must still be one hover away.
Do not use it where the exact time is the main information (deadlines, appointments): show that directly.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
date | Date | string | - | The moment. |
now | Date | new Date() | Reference time, for tests and server rendering. |
locale | string | en-US | Formatting locale. |
<time> element with datetime, so machines and assistive technology get the exact value.Intl.RelativeTimeFormat and Intl.DateTimeFormat, so it follows the locale prop.| Key | Action |
|---|---|
| Tab | focuses the time and shows the exact date |
The pattern ships a Testing Library test (tooltip-timestamp-absolute.test.tsx) that covers the datetime attribute, relative wording for several distances, the description and the focus tooltip.