From 5fa8f2cf15b2aae5f7665eb68465deecefdb703c Mon Sep 17 00:00:00 2001
From: youhavetrouble <youhavetrouble@youhavetrouble.me>
Date: Mon, 26 Jun 2023 15:54:14 +0200
Subject: [PATCH] tooltip on technical menu

---
 src/App.vue          |  4 +---
 src/assets/main.scss | 38 +++++++++++++++++++++++++++++++++-----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e8757f3..17b2bd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,25 +21,23 @@ import {version} from "../package.json"
   <header>
     <nav>
       <RouterLink
-          data-tooltip="Guild view"
           :to="{name: 'guild'}"
       >
         Guild
       </RouterLink>
       <RouterLink
-          data-tooltip="Adventures!"
           :to="{name: 'quests'}"
       >
         Quests
       </RouterLink>
       <RouterLink
-          data-tooltip="Manage your adventurers"
           :to="{name: 'adventurers'}"
       >
         Adventurers
       </RouterLink>
       <RouterLink
           data-tooltip="Technical information"
+          data-tooltip-position="bottom"
           :to="{name: 'technical'}"
       >
         <img class="icon" src="/img/icons/cog.svg" alt="Technical">
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 15098dd..2b0ce8c 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -123,17 +123,45 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    content: attr(data-tooltip);
-    bottom: calc(-100% - 0.5rem);
-    left: 50%;
-    transform: translateX(-50%);
     width: max-content;
     min-height: 2rem;
     background-color: rgba(0,0,0, 0.5);
     color: #fff;
     font-size: 1rem;
-    padding: 0.25rem;
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+    white-space: break-spaces;
   }
+
+  &[data-tooltip-position="bottom"]:after {
+    content: attr(data-tooltip);
+    bottom: calc(-100% - 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 200%;
+  }
+  &[data-tooltip-position="top"]:after {
+    content: attr(data-tooltip);
+    top: calc(-100% - 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 200%;
+  }
+  &[data-tooltip-position="left"]:after {
+    content: attr(data-tooltip);
+    top: 50%;
+    right: calc(100% + 0.5rem);
+    transform: translateY(-50%);
+    max-width: 20rem;
+  }
+  &[data-tooltip-position="right"]:after {
+    content: attr(data-tooltip);
+    top: 50%;
+    left: calc(100% + 0.5rem);
+    transform: translateY(-50%);
+    max-width: 20rem;
+  }
+
   &:hover:after {
     opacity: 100%;
   }