Add support for .bottom modifier

src/directives/tooltip.js

@@ -1,5 +1,23 @@
+const calculateTop = (coords, tooltip) => {
+	// Bottom tooltip use the exact inverse calculation compared to the default.
+	if (tooltip.classList.contains('bottom')) {
+		return coords.top + tooltip.offsetHeight + 5
+	}
+
+	// The top position of the tooltip is the coordinates of the bound element - the height of the tooltip -
+	// 5px spacing for the arrow (which is exactly 5px high)
+	return coords.top - tooltip.offsetHeight - 5
+}
+
+const calculateArrowTop = (top, tooltip) => {
+	if (tooltip.classList.contains('bottom')) {
+		return `${top - 5}px` // 5px arrow height
+	}
+	return `${top + tooltip.offsetHeight}px`
+}
+
 export default {
-	inserted: (el, {value}) => {
+	inserted: (el, {value, modifiers}) => {
 		// First, we create the tooltip and arrow elements
 		const tooltip = document.createElement('div')
 		tooltip.style.position = 'fixed'
@@ -9,6 +27,11 @@ export default {
 		arrow.classList.add('tooltip-arrow')
 		arrow.style.position = 'fixed'
 
+		if (typeof modifiers.bottom !== 'undefined') {
+			tooltip.classList.add('bottom')
+			arrow.classList.add('bottom')
+		}
+
 		// We don't append the element until hovering over it because that's the most reliable way to determine
 		// where the parent elemtent is located at the time the user hovers over it.
 		el.addEventListener('mouseover', () => {
@@ -18,9 +41,7 @@ export default {
 			document.body.appendChild(arrow)
 
 			const coords = el.getBoundingClientRect()
-			// The top position of the tooltip is the coordinates of the bound element - the height of the tooltip -
-			// 5px spacing for the arrow (which is exactly 5px high)
-			const top = coords.top - tooltip.offsetHeight - 5
+			const top = calculateTop(coords, tooltip)
 			// The left position of the tooltip is calculated so that the middle point of the tooltip
 			// (where the arrow will be) is the middle of the bound element
 			const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
@@ -28,8 +49,9 @@ export default {
 			tooltip.style.top = `${top}px`
 			tooltip.style.left = `${coords.left}px`
 			tooltip.style.left = `${left}px`
+
 			arrow.style.left = `${left + (tooltip.offsetWidth / 2) - (arrow.offsetWidth / 2)}px`
-			arrow.style.top = `${top + tooltip.offsetHeight}px`
+			arrow.style.top = calculateArrowTop(top, tooltip)
 
 			// And finally make it visible to the user. This will also trigger a nice fade-in animation through
 			// css transitions

src/styles/components/base/tooltip.scss

@@ -27,6 +27,10 @@
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid $dark;
+
+    &.bottom {
+      transform: rotate(180deg);
+    }
   }
 
   &.visible, &-arrow.visible {