From 278d9d5c0a66a617e91ec5540aff3eb24ebab192 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 2 Nov 2020 23:12:22 +0100
Subject: [PATCH] Fix usage with bigger tooltips

---
 src/directives/tooltip.js               | 21 ++++++++++++++++-----
 src/styles/components/base/tooltip.scss | 19 ++++++++++++++++---
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/directives/tooltip.js b/src/directives/tooltip.js
index 2d5858e0f..ec1c62089 100644
--- a/src/directives/tooltip.js
+++ b/src/directives/tooltip.js
@@ -1,24 +1,35 @@
 export default {
 	inserted: (el, {value}) => {
 		const tooltip = document.createElement('div')
-		tooltip.style.position = 'absolute'
+		tooltip.style.position = 'fixed'
 		tooltip.innerText = value
 		tooltip.classList.add('tooltip')
 		const arrow = document.createElement('div')
 		arrow.classList.add('tooltip-arrow')
-		arrow.style.position = 'absoulte'
+		arrow.style.position = 'fixed'
 
 		el.addEventListener('mouseover', () => {
 			const coords = el.getBoundingClientRect()
-			const top = coords.top - el.offsetHeight - 12
+			document.body.appendChild(tooltip)
+			const top = coords.top - tooltip.offsetHeight - 5
+			const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
 			tooltip.style.top = `${top}px`
 			tooltip.style.left = `${coords.left}px`
-			document.body.appendChild(tooltip)
-			const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
 			tooltip.style.left = `${left}px`
 			arrow.style.left = `${left + (tooltip.offsetWidth / 2) - (arrow.offsetWidth / 2)}px`
 			arrow.style.top = `${top + tooltip.offsetHeight}px`
 			document.body.appendChild(arrow)
+
+			tooltip.classList.add('visible')
+			arrow.classList.add('visible')
+		})
+
+		el.addEventListener('mouseout', () => {
+			tooltip.classList.remove('visible')
+			arrow.classList.remove('visible')
 		})
 	},
+	unbind: el => {
+		console.log('unbind', el)
+	},
 }
diff --git a/src/styles/components/base/tooltip.scss b/src/styles/components/base/tooltip.scss
index db3d1efe4..eef214831 100644
--- a/src/styles/components/base/tooltip.scss
+++ b/src/styles/components/base/tooltip.scss
@@ -7,17 +7,30 @@
   color: white;
   border-radius: 5px;
   padding: 5px 10px 5px;
+  opacity: 0;
+  transition: opacity $transition;
+
+  // If the tooltip is multiline, it would make the height calculations needed to properly position it a lot harder.
+  white-space: nowrap;
+  overflow: hidden;
 
   &-arrow {
+    opacity: 0;
     content: '';
     display: block;
     position: absolute;
+    transition: opacity $transition;
+    z-index: 10000;
 
     width: 0;
     height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid $dark;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid $dark;
+  }
+
+  &.visible, &-arrow.visible {
+    opacity: 1;
   }
 
   &[x-placement^="top"] {