Merge pull request #74 from mklomp/tooltip

Fix for tooltip issue

Author: mklomp

vue-frontend/src/assets/scss/main.scss

@@ -162,3 +162,7 @@ $custom-control-indicator-checked-bg: $grey-blue;
   color: $white !important;
   border: 1px solid $black;
 }
+
+// Fix for bootstrap-vue issue with tooltips:
+// https://github.com/bootstrap-vue/bootstrap-vue/issues/1732
+.tooltip { top: 0; }

vue-frontend/src/components/ControlButtons.vue

@@ -18,29 +18,29 @@
 
         <span class="nav-spacer"></span>
 
-        <span v-b-tooltip :title="$t('programming.start')" style="display: inline-block;">
+        <span v-b-tooltip.hover :title="$t('programming.start')" style="display: inline-block;">
         <button :disabled="!isPlayEnabled" class="btn btn-outline-light mx-2" 
             @click="control('play')">
             <i class="fas fa-play"></i>
         </button>
         </span>
 
 <!--
-        <span v-b-tooltip :title="$t('programming.pause')" style="display: inline-block;">
+        <span v-b-tooltip.hover :title="$t('programming.pause')" style="display: inline-block;">
         <button :disabled="isPauseDisabled" 
             @click="control('pause')" class="btn btn-outline-light mr-2">
             <i class="fa fa-pause"></i>
         </button>
         </span>
 
-        <span v-b-tooltip :title="$t('programming.step')" style="display: inline-block;">
+        <span v-b-tooltip.hover :title="$t('programming.step')" style="display: inline-block;">
         <button :disabled="isStepDisabled" class="btn btn-outline-light mr-2" 
             @click="control('step')">
             <i class="fa fa-step-forward"></i>
         </button>
         </span>
 -->
-        <span v-b-tooltip :title="$t('programming.stop')" style="display: inline-block;">
+        <span v-b-tooltip.hover :title="$t('programming.stop')" style="display: inline-block;">
 	<button :disabled="!isStopEnabled" class="btn btn-outline-light mr-2" 
             @click="control('stop')">
             <i class="fa fa-stop"></i>