Use the tooltip mixinissue-edit-inline-description-field

[ci skip]

4 files changed, 30 insertions, 8 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index f08ebac260e..68bbd263f02 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -60,7 +60,7 @@
     },
     mounted() {
       /*
-        GLForm class handles all the toolbar buttons etc.
+        GLForm class handles all the toolbar buttons
       */
       return new gl.GLForm($(this.$refs['gl-form']));
     },
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 4c9f112a2ab..7884b25c5ef 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,7 +1,11 @@
 <script>
+  import tooltipMixin from '../../mixins/tooltip';
   import toolbarButton from './toolbar_button.vue';
 
   export default {
+    mixins: [
+      tooltipMixin,
+    ],
     props: {
       previewMarkdown: {
         type: Boolean,
@@ -82,9 +86,9 @@
             class="toolbar-btn js-zen-enter"
             data-container="body"
             tabindex="-1"
-            data-toggle="tooltip"
             title="Go full screen"
-            type="button">
+            type="button"
+            ref="tooltip">
             <i
               aria-hidden="true"
               class="fa fa-arrows-alt fa-fw">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index c87a3c1e910..096be507625 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,5 +1,10 @@
 <script>
+  import tooltipMixin from '../../mixins/tooltip';
+
   export default {
+    mixins: [
+      tooltipMixin,
+    ],
     props: {
       buttonTitle: {
         type: String,
@@ -24,6 +29,11 @@
         default: false,
       },
     },
+    computed: {
+      iconClass() {
+        return `fa-${this.icon}`;
+      },
+    },
   };
 </script>
 
@@ -32,17 +42,17 @@
     type="button"
     class="toolbar-btn js-md hidden-xs"
     tabindex="-1"
+    ref="tooltip"
+    data-container="body"
     :data-md-tag="tag"
     :data-md-block="tagBlock"
     :data-md-prepend="prepend"
-    data-container="body"
-    data-toggle="tooltip"
     :title="buttonTitle"
     :aria-label="buttonTitle">
     <i
       aria-hidden="true"
       class="fa fa-fw"
-      :class="'fa-' + icon">
+      :class="iconClass">
     </i>
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/mixins/tooltip.js b/app/assets/javascripts/vue_shared/mixins/tooltip.js
index 9bb948bff66..2e3b716a36c 100644
--- a/app/assets/javascripts/vue_shared/mixins/tooltip.js
+++ b/app/assets/javascripts/vue_shared/mixins/tooltip.js
@@ -1,9 +1,17 @@
 export default {
   mounted() {
-    $(this.$refs.tooltip).tooltip();
+    this.$nextTick(() => {
+      $(this.$refs.tooltip).tooltip();
+    });
   },
 
   updated() {
-    $(this.$refs.tooltip).tooltip('fixTitle');
+    this.$nextTick(() => {
+      $(this.$refs.tooltip).tooltip('fixTitle');
+    });
+  },
+
+  beforeDestroy() {
+    $(this.$refs.tooltip).tooltip('destroy');
   },
 };