add tooltips

client/src/modules/ui/components/bd/templates/PluginCard.html

@@ -1,6 +1,6 @@
 <div class="bd-plugin-card">
     <div class="bd-plugin-header">
-        <span>{{plugin.name}}</span>
+        <span v-tooltip="'wat'">{{plugin.name}}</span>
         <div class="bd-flex-spacer"/>
         <label class="bd-switch-wrapper" @click="togglePlugin(plugin)">
             <input type="checkbox" class="bd-switch-checkbox" />
@@ -14,16 +14,16 @@
             <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
             <div class="bd-controls">
                 <ButtonGroup>
-                    <Button v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
+                    <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
                         <MiSettings/>
                     </Button>
-                    <Button :onClick="() => reloadPlugin(plugin)">
+                    <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
                         <MiReload/>
                     </Button>
-                    <Button :onClick="editPlugin">
+                    <Button v-tooltip="'Edit'" :onClick="editPlugin">
                         <MiEdit/>
                     </Button>
-                    <Button type="err">
+                    <Button v-tooltip="'Uninstall'" type="err">
                         <MiDelete/>
                     </Button>
                 </ButtonGroup>

client/src/modules/ui/vueui.js

@@ -9,17 +9,28 @@
 */
 
 const $ = require('jquery');
-const Vue = require('vue');
+const Vue = require('vue').default;
+const VTooltip = require('v-tooltip');
 
 const BdSettingsWrapper = (require('./components/BdSettingsWrapper.vue')).default;
 class UI {
 
     constructor() {
-        $('body').append($('<bdbody/>').append($('<div/>', {
+        $('body').append($('<bdbody/>')
+            .append($('<div/>', {
             id: 'bd-settings'
-        })));
+        })).append($('<bdtooltips/>')));
 
-         this.vueInstance = new Vue.default({
+        Vue.use(VTooltip, {
+            defaultContainer: 'bdtooltips',
+            defaultClass: 'bd-tooltip',
+            defaultTargetClass: 'bd-has-tooltip',
+            defaultInnerSelector: '.bd-tooltip-inner',
+            defaultTemplate: '<div class="bd-tooltip"><span class="bd-tooltip-inner"></span></div>'
+        });
+
+
+         this.vueInstance = new Vue({
              el: '#bd-settings',
              template: '<BdSettingsWrapper/>',
              components: { BdSettingsWrapper }
@@ -29,4 +40,6 @@ class UI {
 }
 
 
-module.exports = { UI }
+module.exports = { UI }
+
+

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

@@ -2,3 +2,4 @@
 @import './sidebarview.scss';
 @import './plugins.scss';
 @import './plugincard.scss';
+@import './tooltips.scss';

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

@@ -0,0 +1,36 @@
+bdtooltips {
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 9000;
+}
+
+.bd-tooltip {
+    background-color: #000;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
+    color: #dcddde;
+    contain: layout;
+    font-size: 14px;
+    font-weight: 500;
+    max-width: 190px;
+    padding: 8px 12px;
+    position: absolute;
+    word-wrap: break-word;
+    z-index: 9001;
+    margin-bottom: 10px;
+}
+
+.bd-tooltip:after {
+    border: 5px solid transparent;
+    content: " ";
+    height: 0;
+    pointer-events: none;
+    width: 0;
+    border-top-color: #000;
+    left: 50%;
+    margin-left: -5px;
+    position: absolute;
+    top: 100%;
+}

package.json

@@ -37,7 +37,8 @@
     "gulp-watch": "^5.0.0",
     "codemirror": "^5.23.0",
     "vue-codemirror": "^4.0.3",
-    "vue-material-design-icons": "^1.0.0"
+    "vue-material-design-icons": "^1.0.0",
+    "v-tooltip": "^2.0.0-rc.30"
 
   },
   "scripts": {