Remove tooltips when their elements are unbound

src/components/home/navigation.vue

@@ -63,7 +63,7 @@
 						:to="{name: 'namespace.edit', params: {id: n.id} }"
 						class="nsettings"
 						v-if="n.id > 0"
-						v-tooltip.right="'Settings'">
+						v-tooltip="'Settings'">
 						<span class="icon">
 							<icon icon="cog"/>
 						</span>

src/directives/tooltip.js

@@ -16,6 +16,11 @@ const calculateArrowTop = (top, tooltip) => {
 	return `${top + tooltip.offsetHeight}px`
 }
 
+// This global object holds all created tooltip elements (and their arrows) using the element they were created for as
+// key. This allows us to find the tooltip elements if the element the tooltip was created for is unbound so that
+// we can remove the tooltip element.
+const createdTooltips = {}
+
 export default {
 	inserted: (el, {value, modifiers}) => {
 		// First, we create the tooltip and arrow elements
@@ -63,9 +68,16 @@ export default {
 			tooltip.classList.remove('visible')
 			arrow.classList.remove('visible')
 		})
+
+		createdTooltips[el] = {
+			tooltip: tooltip,
+			arrow: arrow,
+		}
 	},
 	unbind: el => {
-		// TODO: find the tooltip we added for that element and remove it from the dom.
-		console.log('unbind', el)
+		if (typeof createdTooltips[el] !== 'undefined') {
+			createdTooltips[el].tooltip.remove()
+			createdTooltips[el].arrow.remove()
+		}
 	},
 }