x
1
2
3
4
5
6
7
<span data-view-component="true" class="position-relative"><a id="link" href="#" data-view-component="true" class="Link"><span data-view-component="true" class="Link-content"><relative-time id="relative-time" tense="auto" no-title="true" datetime="2020-01-01T00:00:00Z" data-view-component="true">January 1, 2020 00:00</relative-time></span></a> <tool-tip id="tool-tip" for="link" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">2020-01-01 00:00:00 UTC</tool-tip></span><script> // When `<relative-time>`’s `title` changes, update `<tool-tip>` text. document.getElementById("relative-time").addEventListener("relative-time-updated", ({newTitle}) => { document.getElementById("tool-tip").textContent = newTitle })</script>1
2
3
4
5
6
7
8
9
10
11
12
13
<% time = Time.utc(2020, 1, 1, 0, 0, 0) %><%= render(Primer::Beta::Link.new(href: "#", id: "link")) do |link| %> <% link.with_tooltip(id: "tool-tip", text: time.to_s) %> <%= render(Primer::Beta::RelativeTime.new(id: "relative-time", datetime: time, no_title: true)) %><% end %><script> // When `<relative-time>`’s `title` changes, update `<tool-tip>` text. document.getElementById("relative-time").addEventListener("relative-time-updated", ({newTitle}) => { document.getElementById("tool-tip").textContent = newTitle })</script>No notes provided.
No params configured.
app/components/primer/beta/relative_time.ts
1
import '@github/relative-time-element'