prototype tooltips

src/App.vue

@@ -20,10 +20,30 @@ import {version} from "../package.json"
   </section>
   <header>
     <nav>
-      <RouterLink :to="{name: 'guild'}">Guild</RouterLink>
+      <RouterLink
-      <RouterLink :to="{name: 'quests'}">Quests</RouterLink>
+          data-tooltip="Guild view"
-      <RouterLink :to="{name: 'adventurers'}">Adventurers</RouterLink>
+          :to="{name: 'guild'}"
-      <RouterLink :to="{name: 'technical'}"><img class="icon" src="/img/icons/cog.svg" alt="Technical"></RouterLink>
+      >
+        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"
+          :to="{name: 'technical'}"
+      >
+        <img class="icon" src="/img/icons/cog.svg" alt="Technical">
+      </RouterLink>
     </nav>
   </header>
   <RouterView
@@ -394,22 +414,24 @@ nav {
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 2rem;
+  padding-inline: 2rem;
-  background-size: 200px;
+  padding-bottom: 2rem;
-  background-blend-mode: darken;
+  padding-top: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.65);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-image: url("/img/background/panels/wall_panel_empty.png");
+  filter: drop-shadow(0 0 0.5rem rgba(0,0,0, 0.25));
 
   .icon {
     width: 2rem;
     height: 2rem;
-    fill: white;
-    filter: invert(1);
     transform: translateY(0.35rem);
   }
 
   a {
     font-size: 2rem;
-    color: #fff;
+    color: #000;
     text-decoration: none;
 
     &.router-link-active {

src/assets/main.scss

@@ -112,3 +112,29 @@ body {
     line-height: 0.25;
   }
 }
+
+[data-tooltip] {
+  position: relative;
+  &:after {
+    pointer-events: none;
+    transition: opacity 0.25s ease-in-out;
+    opacity: 0;
+    position: absolute;
+    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;
+  }
+  &:hover:after {
+    opacity: 100%;
+  }
+}