Adds flag to optionally hide title attribute

Author: lindseywild

examples/index.html

@@ -21,6 +21,13 @@ <h3>Format DateTime</h3>
     </relative-time>
   </p>
 
+  <p>
+    Hide title attribute:
+    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hide-title="true">
+      Jan 1 1970
+    </relative-time>
+  </p>
+
   <p>
     Customised options:
     <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
@@ -185,8 +192,8 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <!-- <script type="module" src="../dist/index.js"></script> -->
-  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
+  <script type="module" src="../dist/index.js"></script>
+  <!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
   <script>
     document.body.addEventListener('relative-time-updated', event => {
       console.log('event from', event.target, event)

src/relative-time-element.ts

@@ -107,6 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'precision',
       'format',
       'format-style',
+      'hide-title',
       'datetime',
       'lang',
       'title',
@@ -382,6 +383,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('format-style', value)
   }
 
+  get hideTitle(): boolean {
+    return this.getAttribute('hide-title') === 'true'
+  }
+
   get datetime() {
     return this.getAttribute('datetime') || ''
   }
@@ -431,7 +436,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       return
     }
     const now = Date.now()
-    if (!this.#customTitle) {
+    if (!this.#customTitle && !this.hideTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
       if (newTitle) this.setAttribute('title', newTitle)
     }

test/relative-time.js

@@ -83,6 +83,22 @@ suite('relative-time', function () {
     assert.equal(el.getAttribute('title'), text)
   })
 
+  test('does not set title if hide-title=true', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date().toISOString())
+    el.setAttribute('hide-title', true)
+    await Promise.resolve()
+    assert.equal(el.getAttribute('title'), null)
+  })
+
+  test('sets title if hide-title=false', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date().toISOString())
+    el.setAttribute('hide-title', false)
+    await Promise.resolve()
+    assert.ok(el.getAttribute('title'))
+  })
+
   test('shadowDOM reflects textContent with invalid date', async () => {
     const el = document.createElement('relative-time')
     el.textContent = 'A date string'