content: datetimestamps: use generateTooltip

3 files changed, 42 insertions, 20 deletions

diff --git a/src/content/dependencies/generateAbsoluteDatetimestamp.js b/src/content/dependencies/generateAbsoluteDatetimestamp.js
index 63acecf2..930b6f13 100644
--- a/src/content/dependencies/generateAbsoluteDatetimestamp.js
+++ b/src/content/dependencies/generateAbsoluteDatetimestamp.js
@@ -1,12 +1,21 @@
 export default {
-  contentDependencies: ['generateDatetimestampTemplate'],
+  contentDependencies: [
+    'generateDatetimestampTemplate',
+    'generateTooltip',
+  ],
+
   extraDependencies: ['html', 'language'],
 
   data: (date) =>
     ({date}),
 
-  relations: (relation) =>
-    ({template: relation('generateDatetimestampTemplate')}),
+  relations: (relation) => ({
+    template:
+      relation('generateDatetimestampTemplate'),
+
+    tooltip:
+      relation('generateTooltip'),
+  }),
 
   slots: {
     style: {
@@ -30,10 +39,13 @@ export default {
           ? data.date.getFullYear().toString()
           : null),
 
-      tooltipContent:
+      tooltip:
         slots.tooltip &&
         slots.style === 'year' &&
-          language.formatDate(data.date),
+          relations.tooltip.slots({
+            content:
+              language.formatDate(data.date),
+          }),
 
       datetime:
         data.date.toISOString(),
diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js
index 29c81572..9b1d7aa8 100644
--- a/src/content/dependencies/generateDatetimestampTemplate.js
+++ b/src/content/dependencies/generateDatetimestampTemplate.js
@@ -7,9 +7,9 @@ export default {
       mutable: false,
     },
 
-    tooltipContent: {
+    tooltip: {
       type: 'html',
-      mutable: false,
+      mutable: true,
     },
 
     datetime: {type: 'string'},
@@ -19,7 +19,7 @@ export default {
     html.tag('span', {class: 'datetimestamp'},
       {[html.joinChildren]: ''},
 
-      slots.tooltipContent &&
+      !html.isBlank(slots.tooltip) &&
         {class: 'has-tooltip'},
 
       [
@@ -27,9 +27,8 @@ export default {
           {datetime: slots.datetime},
           slots.mainContent),
 
-        slots.tooltipContent &&
-          html.tag('span', {class: ['tooltip', 'datetimestamp-tooltip']},
-            html.tag('span', {class: 'tooltip-content'},
-              slots.tooltipContent)),
+        slots.tooltip?.slots({
+          attributes: [{class: 'datetimestamp-tooltip'}],
+        }),
       ]),
 };
diff --git a/src/content/dependencies/generateRelativeDatetimestamp.js b/src/content/dependencies/generateRelativeDatetimestamp.js
index 7b7a28de..a997de0e 100644
--- a/src/content/dependencies/generateRelativeDatetimestamp.js
+++ b/src/content/dependencies/generateRelativeDatetimestamp.js
@@ -2,6 +2,7 @@ export default {
   contentDependencies: [
     'generateAbsoluteDatetimestamp',
     'generateDatetimestampTemplate',
+    'generateTooltip',
   ],
 
   extraDependencies: ['html', 'language'],
@@ -11,9 +12,16 @@ export default {
       ? {equal: true, date: currentDate}
       : {equal: false, currentDate, referenceDate}),
 
-  relations: (relation, currentDate) =>
-    ({template: relation('generateDatetimestampTemplate'),
-      fallback: relation('generateAbsoluteDatetimestamp', currentDate)}),
+  relations: (relation, currentDate) => ({
+    template:
+      relation('generateDatetimestampTemplate'),
+
+    fallback:
+      relation('generateAbsoluteDatetimestamp', currentDate),
+
+    tooltip:
+      relation('generateTooltip'),
+  }),
 
   slots: {
     style: {
@@ -43,12 +51,15 @@ export default {
           ? data.currentDate.getFullYear().toString()
           : null),
 
-      tooltipContent:
+      tooltip:
         slots.tooltip &&
-          language.formatRelativeDate(data.currentDate, data.referenceDate, {
-            considerRoundingDays: true,
-            approximate: true,
-            absolute: slots.style === 'year',
+          relations.tooltip.slots({
+            content:
+              language.formatRelativeDate(data.currentDate, data.referenceDate, {
+                considerRoundingDays: true,
+                approximate: true,
+                absolute: slots.style === 'year',
+              }),
           }),
 
       datetime: