content, css: generateTextWithTooltip: custom interaction cues

4 files changed, 38 insertions, 24 deletions

diff --git a/src/content/dependencies/generateAlbumTrackListMissingDuration.js b/src/content/dependencies/generateAlbumTrackListMissingDuration.js
index 40c0e353..6d4a6ec8 100644
--- a/src/content/dependencies/generateAlbumTrackListMissingDuration.js
+++ b/src/content/dependencies/generateAlbumTrackListMissingDuration.js
@@ -13,14 +13,14 @@ export default {
   generate: (relations, {html, language}) =>
     relations.textWithTooltip.slots({
       attributes: {class: 'missing-duration'},
+      customInteractionCue: true,
 
       text:
-        html.tag('span',
-          language.$('trackList.item.withDuration.duration', {
-            duration:
-              html.tag('span', {class: 'duration-text'},
-                language.$('trackList.item.withDuration.duration.missing')),
-          })),
+        language.$('trackList.item.withDuration.duration', {
+          duration:
+            html.tag('span', {class: 'text-with-tooltip-interaction-cue'},
+              language.$('trackList.item.withDuration.duration.missing')),
+        }),
 
       tooltip:
         relations.tooltip.slots({
diff --git a/src/content/dependencies/generateTextWithTooltip.js b/src/content/dependencies/generateTextWithTooltip.js
index 518e8782..462557d1 100644
--- a/src/content/dependencies/generateTextWithTooltip.js
+++ b/src/content/dependencies/generateTextWithTooltip.js
@@ -7,6 +7,11 @@ export default {
       mutable: false,
     },
 
+    customInteractionCue: {
+      type: 'boolean',
+      default: false,
+    },
+
     text: {
       type: 'html',
       mutable: false,
@@ -37,10 +42,20 @@ export default {
       });
     }
 
+    const textPart =
+      (hasTooltip && slots.customInteractionCue
+        ? html.tag('span', {class: 'hoverable'},
+            slots.text)
+     : hasTooltip
+        ? html.tag('span', {class: 'hoverable'},
+            html.tag('span', {class: 'text-with-tooltip-interaction-cue'},
+              slots.text))
+        : slots.text);
+
     const content =
       (hasTooltip
-        ? [slots.text, slots.tooltip]
-        : slots.text);
+        ? [textPart, slots.tooltip]
+        : textPart);
 
     return html.tag('span', attributes, content);
   },
diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index 0b0884ef..cb57aa47 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -58,7 +58,13 @@ export default {
     options.artist =
       (hasExternalIcons && slots.iconMode === 'tooltip'
         ? relations.textWithTooltip.slots({
-            text: relations.artistLink,
+            customInteractionCue: true,
+
+            text:
+              relations.artistLink.slots({
+                attributes: {class: 'text-with-tooltip-interaction-cue'},
+              }),
+
             tooltip:
               relations.tooltip.slots({
                 attributes:
diff --git a/src/static/site6.css b/src/static/site6.css
index f926a611..05c24d61 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -507,37 +507,30 @@ a:not([href]):hover {
   position: relative;
 }
 
-.text-with-tooltip > :first-child {
+.text-with-tooltip .text-with-tooltip-interaction-cue {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
 
-.text-with-tooltip > :first-child:hover,
-.text-with-tooltip > :first-child.has-visible-tooltip {
+.text-with-tooltip > .hoverable:hover .text-with-tooltip-interaction-cue,
+.text-with-tooltip > .hoverable.has-visible-tooltip .text-with-tooltip-interaction-cue {
   text-decoration-style: wavy !important;
 }
 
-.text-with-tooltip.datetimestamp > :first-child,
-.text-with-tooltip.missing-duration > :first-child {
+.text-with-tooltip.datetimestamp .text-with-tooltip-interaction-cue,
+.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue {
   cursor: default;
 }
 
-.text-with-tooltip.missing-duration > :first-child {
+.text-with-tooltip.missing-duration > .hoverable {
   opacity: 0.5;
 }
 
-.text-with-tooltip.missing-duration > :first-child:hover,
-.text-with-tooltip.missing-duration > :first-child.has-visible-tooltip {
-  text-decoration: none !important;
+.text-with-tooltip.missing-duration > .hoverable:hover,
+.text-with-tooltip.missing-duration > .hoverable.has-visible-tooltip {
   opacity: 1;
 }
 
-.text-with-tooltip.missing-duration > :first-child:hover .duration-text,
-.text-with-tooltip.missing-duration > :first-child.has-visible-tooltip .duration-text {
-  text-decoration: underline;
-  text-decoration-style: wavy;
-}
-
 .tooltip {
   position: absolute;
   z-index: 3;