2 files changed, 99 insertions, 7 deletions

diff --git a/src/content/dependencies/generateTrackInfoPageOtherReleaseTooltip.js b/src/content/dependencies/generateTrackInfoPageOtherReleaseTooltip.js
new file mode 100644
index 00000000..92ab52ba
--- /dev/null
+++ b/src/content/dependencies/generateTrackInfoPageOtherReleaseTooltip.js
@@ -0,0 +1,53 @@
+import {compareKebabCase} from '#wiki-data';
+
+export default {
+  relations: (relation, otherTrack, _currentTrack) => ({
+    tooltip:
+      relation('generateTooltip'),
+
+    colorStyle:
+      relation('generateColorStyleAttribute', otherTrack.album.color),
+  }),
+
+  data: (otherTrack, currentTrack) => ({
+    otherDate:
+      otherTrack.date,
+
+    currentDate:
+      currentTrack.date,
+
+    differentName:
+      (compareKebabCase(otherTrack.name, currentTrack.name)
+        ? null
+        : otherTrack.name),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('releaseInfo.alsoReleased.tooltip', capsule =>
+      relations.tooltip.slots({
+        attributes: [
+          {class: 'other-release-tooltip'},
+          relations.colorStyle,
+        ],
+
+        contentAttributes: [
+          {[html.joinChildren]:
+            html.tag('span', {class: 'cute-break'})},
+        ],
+
+        content: [
+          language.$(capsule, 'differentName', {
+            [language.onlyIfOptions]: ['name'],
+
+            name: data.differentName,
+          }),
+
+          data.otherDate && data.currentDate &&
+            language.formatRelativeDate(data.otherDate, data.currentDate, {
+              considerRoundingDays: true,
+              approximate: true,
+              absolute: false,
+            }),
+        ],
+      })),
+};
\ No newline at end of file
diff --git a/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js b/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js
index 1793b73f..e2dffea6 100644
--- a/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js
+++ b/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js
@@ -16,15 +16,30 @@ export default {
     return query;
   },
 
-  relations: (relation, query, _track) => ({
+  relations: (relation, query, track) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
     singleLink:
       (query.singleSingle
         ? relation('linkTrack', query.singleSingle)
         : null),
 
+    singleTooltip:
+      (query.singleSingle
+        ? relation('generateTrackInfoPageOtherReleaseTooltip',
+            query.singleSingle, track)
+        : null),
+
     trackLinks:
       query.regularReleases
         .map(track => relation('linkTrack', track)),
+
+    trackTooltips:
+      query.regularReleases
+        .map(otherTrack =>
+          relation('generateTrackInfoPageOtherReleaseTooltip',
+            otherTrack, track)),
   }),
 
   data: (query, _track) => ({
@@ -48,12 +63,27 @@ export default {
           language.formatConjunctionList(
             stitchArrays({
               trackLink: relations.trackLinks,
+              trackTooltip: relations.trackTooltips,
               albumName: data.albumNames,
               albumColor: data.albumColors,
-            }).map(({trackLink, albumName, albumColor}) =>
-                trackLink.slots({
-                  content: language.sanitize(albumName),
-                  color: albumColor,
+            }).map(({
+                trackLink,
+                trackTooltip,
+                albumName,
+                albumColor,
+              }) =>
+                relations.textWithTooltip.clone().slots({
+                  customInteractionCue: true,
+
+                  text:
+                    trackLink.slots({
+                      attributes: {class: 'text-with-tooltip-interaction-cue'},
+                      content: language.sanitize(albumName),
+                      color: albumColor,
+                    }),
+
+                  tooltip:
+                    trackTooltip,
                 })));
 
         if (!html.isBlank(albumList)) {
@@ -66,8 +96,17 @@ export default {
           any = true;
           workingCapsule += '.asSingle';
           workingOptions.single =
-            relations.singleLink.slots({
-              content: language.$(capsule, 'single'),
+            relations.textWithTooltip.clone().slots({
+              customInteractionCue: true,
+
+              text:
+                relations.singleLink.slots({
+                  attributes: {class: 'text-with-tooltip-interaction-cue'},
+                  content: language.$(capsule, 'single'),
+                }),
+
+              tooltip:
+                relations.singleTooltip,
             });
         }