File tree 3 files changed +31
-3
lines changed 3 files changed +31
-3
lines changed Original file line number Diff line number Diff line change @@ -21,6 +21,13 @@ <h3>Format DateTime</h3>
21
21
</ relative-time >
22
22
</ p >
23
23
24
+ < p >
25
+ Hide title attribute:
26
+ < relative-time datetime ="1970-01-01T00:00:00.000Z " format ="datetime " hour ="numeric " minute ="2-digit " second ="2-digit " hide-title ="true ">
27
+ Jan 1 1970
28
+ </ relative-time >
29
+ </ p >
30
+
24
31
< p >
25
32
Customised options:
26
33
< 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>
185
192
</ relative-time >
186
193
</ p >
187
194
188
- <!-- < script type="module" src="../dist/index.js"></script> -- >
189
- < script type ="module " src ="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js "> </ script >
195
+ < script type ="module " src ="../dist/index.js "> </ script >
196
+ <!-- < script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -- >
190
197
< script >
191
198
document . body . addEventListener ( 'relative-time-updated' , event => {
192
199
console . log ( 'event from' , event . target , event )
Original file line number Diff line number Diff line change @@ -107,6 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
107
107
'precision' ,
108
108
'format' ,
109
109
'format-style' ,
110
+ 'hide-title' ,
110
111
'datetime' ,
111
112
'lang' ,
112
113
'title' ,
@@ -382,6 +383,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
382
383
this . setAttribute ( 'format-style' , value )
383
384
}
384
385
386
+ get hideTitle ( ) : boolean {
387
+ return this . getAttribute ( 'hide-title' ) === 'true'
388
+ }
389
+
385
390
get datetime ( ) {
386
391
return this . getAttribute ( 'datetime' ) || ''
387
392
}
@@ -431,7 +436,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
431
436
return
432
437
}
433
438
const now = Date . now ( )
434
- if ( ! this . #customTitle) {
439
+ if ( ! this . #customTitle && ! this . hideTitle ) {
435
440
newTitle = this . #getFormattedTitle( date ) || ''
436
441
if ( newTitle ) this . setAttribute ( 'title' , newTitle )
437
442
}
Original file line number Diff line number Diff line change @@ -83,6 +83,22 @@ suite('relative-time', function () {
83
83
assert . equal ( el . getAttribute ( 'title' ) , text )
84
84
} )
85
85
86
+ test ( 'does not set title if hide-title=true' , async ( ) => {
87
+ const el = document . createElement ( 'relative-time' )
88
+ el . setAttribute ( 'datetime' , new Date ( ) . toISOString ( ) )
89
+ el . setAttribute ( 'hide-title' , true )
90
+ await Promise . resolve ( )
91
+ assert . equal ( el . getAttribute ( 'title' ) , null )
92
+ } )
93
+
94
+ test ( 'sets title if hide-title=false' , async ( ) => {
95
+ const el = document . createElement ( 'relative-time' )
96
+ el . setAttribute ( 'datetime' , new Date ( ) . toISOString ( ) )
97
+ el . setAttribute ( 'hide-title' , false )
98
+ await Promise . resolve ( )
99
+ assert . ok ( el . getAttribute ( 'title' ) )
100
+ } )
101
+
86
102
test ( 'shadowDOM reflects textContent with invalid date' , async ( ) => {
87
103
const el = document . createElement ( 'relative-time' )
88
104
el . textContent = 'A date string'
You can’t perform that action at this time.
0 commit comments