Fix tooltips and add Vue to vendor

client/src/modules/vendor.js

@@ -11,6 +11,7 @@
 import { WebpackModules } from './webpackmodules';
 import jQuery from 'jquery';
 import lodash from 'lodash';
+import Vue from 'vue';
 
 export { jQuery as $ };
 
@@ -35,4 +36,11 @@ export default class {
         return WebpackModules.getModuleByName('Moment');
     }
 
+    /**
+     * Vue
+     */
+    static get Vue() {
+        return Vue;
+    }
+
 }

client/src/styles/partials/bdsettings/tooltips.scss

@@ -19,7 +19,6 @@ bd-tooltips {
     position: absolute;
     word-wrap: break-word;
     z-index: 9001;
-    margin-bottom: 10px;
 
     .bd-tooltip-arrow {
         border: 5px solid transparent;
@@ -27,10 +26,46 @@ bd-tooltips {
         height: 0;
         pointer-events: none;
         width: 0;
-        border-top-color: #000;
-        left: 50%;
-        margin-left: -5px;
         position: absolute;
-        top: 100%;
+    }
+
+    &[x-placement^="top"] {
+        margin-bottom: 10px;
+
+        .bd-tooltip-arrow {
+            margin-left: -5px;
+            border-top-color: #000;
+            bottom: -10px;
+        }
+    }
+
+    &[x-placement^="bottom"] {
+        margin-top: 10px;
+
+        .bd-tooltip-arrow {
+            border-width: 0 5px 5px 5px;
+            top: -5px;
+            border-bottom-color: #000;
+        }
+    }
+
+    &[x-placement^="right"] {
+        margin-left: 10px;
+
+        .bd-tooltip-arrow {
+            border-width: 5px 5px 5px 0;
+            left: -5px;
+            border-right-color: #000;
+        }
+    }
+
+    &[x-placement^="left"] {
+        margin-right: 10px;
+
+        .bd-tooltip-arrow {
+            border-width: 5px 0 5px 5px;
+            right: -5px;
+            border-left-color: #000;
+        }
     }
 }