1 files changed, 34 insertions, 7 deletions

diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index 7c4aed80..9d70ec91 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -3,6 +3,8 @@ import {empty} from '#sugar';
 export default {
   contentDependencies: [
     'generateColorStyleAttribute',
+    'generateTextWithTooltip',
+    'generateTooltip',
     'linkArtist',
     'transformContent',
   ],
@@ -33,10 +35,18 @@ export default {
 
     colorStyle:
       relation('generateColorStyleAttribute'),
+
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
   }),
 
   data: (entry) => ({
     date: entry.date,
+    accessDate: entry.accessDate,
+    accessKind: entry.accessKind,
   }),
 
   slots: {
@@ -52,15 +62,32 @@ export default {
               .slot('color', slots.color),
 
           language.encapsulate(entryCapsule, 'title', titleCapsule => [
-            html.tag('time',
-              {[html.onlyIfContent]: true},
+            relations.textWithTooltip.slots({
+              attributes: {class: 'commentary-date'},
+
+              text:
+                html.tag('time',
+                  {[html.onlyIfContent]: true},
 
-              language.$(titleCapsule, 'date', {
-                [language.onlyIfOptions]: ['date'],
+                  language.$(titleCapsule, 'date', {
+                    [language.onlyIfOptions]: ['date'],
 
-                date:
-                  language.formatDate(data.date),
-              })),
+                    date:
+                      language.formatDate(data.date),
+                  })),
+
+              tooltip:
+                data.accessKind &&
+                  relations.tooltip.slots({
+                    attributes: {class: 'commentary-date-tooltip'},
+
+                    content:
+                      language.$(titleCapsule, 'date', data.accessKind, {
+                        date:
+                          language.formatDate(data.accessDate),
+                      }),
+                  }),
+            }),
 
             language.encapsulate(titleCapsule, workingCapsule => {
               const workingOptions = {};