Use the tooltip mixin

[ci skip]

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']));
     },

app/assets/javascripts/vue_shared/components/markdown/header.vue

 <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">

app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

 <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>

app/assets/javascripts/vue_shared/mixins/tooltip.js

 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');
   },
 };