content, css, test: linkThing: wiki tooltip

2 files changed, 52 insertions, 12 deletions

diff --git a/src/content/dependencies/linkThing.js b/src/content/dependencies/linkThing.js
index 4c38c51d..d1f6a097 100644
--- a/src/content/dependencies/linkThing.js
+++ b/src/content/dependencies/linkThing.js
@@ -1,5 +1,11 @@
 export default {
-  contentDependencies: ['generateColorStyleAttribute', 'linkTemplate'],
+  contentDependencies: [
+    'generateColorStyleAttribute',
+    'generateTextWithTooltip',
+    'generateTooltip',
+    'linkTemplate',
+  ],
+
   extraDependencies: ['html', 'language'],
 
   relations: (relation, _pathKey, thing) => ({
@@ -8,6 +14,12 @@ export default {
 
     colorStyle:
       relation('generateColorStyleAttribute', thing.color ?? null),
+
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
   }),
 
   data: (pathKey, thing) => ({
@@ -37,8 +49,8 @@ export default {
     },
 
     tooltipStyle: {
-      validate: v => v.is('none', 'browser'),
-      default: 'none',
+      validate: v => v.is('none', 'auto', 'browser', 'wiki'),
+      default: 'auto',
     },
 
     color: {
@@ -79,6 +91,18 @@ export default {
         ? data.nameShort
         : data.name);
 
+    const showWikiTooltip =
+      (slots.tooltipStyle === 'auto'
+        ? showShortName
+        : slots.tooltipStyle === 'wiki');
+
+    const wikiTooltip =
+      showWikiTooltip &&
+        relations.tooltip.slots({
+          attributes: {class: 'thing-name-tooltip'},
+          content: data.name,
+        });
+
     if (slots.tooltipStyle === 'browser') {
       attributes.add('title', data.name);
     }
@@ -100,14 +124,19 @@ export default {
       attributes.add(colorStyle);
     }
 
-    return relations.linkTemplate
-      .slots({
-        path: slots.anchor ? [] : path,
-        href: slots.anchor ? '' : null,
-        content,
-        attributes,
-        hash: slots.hash,
-        linkless: slots.linkless,
-      });
+    return relations.textWithTooltip.slots({
+      text:
+        relations.linkTemplate.slots({
+          path: slots.anchor ? [] : path,
+          href: slots.anchor ? '' : null,
+          content,
+          attributes,
+          hash: slots.hash,
+          linkless: slots.linkless,
+        }),
+
+      tooltip:
+        wikiTooltip ?? null,
+    });
   },
 }
diff --git a/src/static/site6.css b/src/static/site6.css
index 4e761963..0e77a6e6 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -562,6 +562,11 @@ li:not(:first-child:last-child) .tooltip,
   left: -10px;
 }
 
+.thing-name-tooltip {
+  padding: 3px 4px 2px 2px;
+  left: -6px !important;
+}
+
 .icons-tooltip .tooltip-content {
   padding: 6px 2px 2px 2px;
 
@@ -577,6 +582,12 @@ li:not(:first-child:last-child) .tooltip,
   font-size: 0.9em;
 }
 
+.thing-name-tooltip .tooltip-content {
+  padding: 3px 4.5px;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
 .icons {
   font-style: normal;
   white-space: nowrap;