Add very basic vanilla js tooltip

src/directives/tooltip.js

@@ -0,0 +1,24 @@
+export default {
+	inserted: (el, {value}) => {
+		const tooltip = document.createElement('div')
+		tooltip.style.position = 'absolute'
+		tooltip.innerText = value
+		tooltip.classList.add('tooltip')
+		const arrow = document.createElement('div')
+		arrow.classList.add('tooltip-arrow')
+		arrow.style.position = 'absoulte'
+
+		el.addEventListener('mouseover', () => {
+			const coords = el.getBoundingClientRect()
+			const top = coords.top - el.offsetHeight - 12
+			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)
+		})
+	},
+}

src/main.js

@@ -56,8 +56,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle} from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
-// Tooltip
-import VTooltip from 'v-tooltip'
 // PWA
 import './registerServiceWorker'
 
@@ -140,13 +138,14 @@ library.add(faStarSolid)
 
 Vue.component('icon', FontAwesomeIcon)
 
-Vue.use(VTooltip, {defaultHtml: false})
-
 Vue.use(vueShortkey)
 
 import focus from '@/directives/focus'
 Vue.directive('focus', focus)
 
+import tooltip from '@/directives/tooltip'
+Vue.directive('tooltip', tooltip)
+
 Vue.mixin({
 	methods: {
 		formatDateSince: date => {

src/styles/components/base/tooltip.scss

@@ -3,22 +3,21 @@
   z-index: 10000;
   font-size: 0.8em;
   text-align: center;
+  background: $dark;
+  color: white;
+  border-radius: 5px;
+  padding: 5px 10px 5px;
 
-  .tooltip-inner {
-    background: $dark;
-    color: white;
-    border-radius: 5px;
-    padding: 5px 10px 5px;
-  }
+  &-arrow {
+    content: '';
+    display: block;
+    position: absolute;
 
-  .tooltip-arrow {
     width: 0;
     height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: $dark;
-    z-index: 1;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid $dark;
   }
 
   &[x-placement^="top"] {