Add support for multiple tooltips in the same Vue component

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/33223

app/assets/javascripts/environments/components/environment_actions.vue

@@ -54,10 +54,9 @@ export default {
     role="group">
     <button
       type="button"
-      class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
+      class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container js-vue-tooltip"
       data-container="body"
       data-toggle="dropdown"
-      ref="tooltip"
       :title="title"
       :aria-label="title"
       :disabled="isLoading">

app/assets/javascripts/issue_show/components/fields/project_move.vue

@@ -71,9 +71,9 @@
         data-placeholder="Move to a different project" />
     </div>
     <span
+      class="js-vue-tooltip"
       data-placement="auto top"
-      title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
-      ref="tooltip">
+      title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location.">
       <i
         class="fa fa-question-circle"
         aria-hidden="true">

app/assets/javascripts/pipelines/components/graph/action_component.vue

@@ -49,8 +49,7 @@
     :data-method="actionMethod"
     :title="tooltipText"
     :href="link"
-    ref="tooltip"
-    class="ci-action-icon-container"
+    class="ci-action-icon-container js-vue-tooltip"
     data-toggle="tooltip"
     data-container="body">

app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue

@@ -45,9 +45,8 @@
     :data-method="actionMethod"
     :title="tooltipText"
     :href="link"
-    ref="tooltip"
     rel="nofollow"
-    class="ci-action-icon-wrapper js-ci-status-icon"
+    class="ci-action-icon-wrapper js-ci-status-icon js-vue-tooltip"
     data-toggle="tooltip"
     data-container="body"
     v-html="actionIconSvg"

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -56,9 +56,8 @@
       type="button"
       data-toggle="dropdown"
       data-container="body"
-      class="dropdown-menu-toggle build-content"
-      :title="tooltipText"
-      ref="tooltip">
+      class="dropdown-menu-toggle build-content js-vue-tooltip"
+      :title="tooltipText">
       <job-name-component
         :name="job.name"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -80,8 +80,8 @@
       v-if="job.status.details_path"
       :href="job.status.details_path"
       :title="tooltipText"
+      class="js-vue-tooltip"
       :class="cssClassJobName"
-      ref="tooltip"
       data-toggle="tooltip"
       data-container="body">
@@ -94,8 +94,8 @@
     <div
       v-else
       :title="tooltipText"
+      class="js-vue-tooltip"
       :class="cssClassJobName"
-      ref="tooltip"
       data-toggle="tooltip"
       data-container="body">

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -44,16 +44,14 @@ export default {
     </span>
     <span
       v-if="pipeline.flags.latest"
-      class="js-pipeline-url-lastest label label-success"
-      title="Latest pipeline for this branch"
-      ref="tooltip">
+      class="js-pipeline-url-lastest js-vue-tooltip label label-success"
+      title="Latest pipeline for this branch">
       latest
     </span>
     <span
       v-if="pipeline.flags.yaml_errors"
-      class="js-pipeline-url-yaml label label-danger"
-      :title="pipeline.yaml_errors"
-      ref="tooltip">
+      class="js-pipeline-url-yaml js-vue-tooltip label label-danger"
+      :title="pipeline.yaml_errors">
       yaml invalid
     </span>
     <span

app/assets/javascripts/pipelines/components/pipelines_actions.js

@@ -59,12 +59,11 @@ export default {
     <div class="btn-group" v-if="actions">
       <button
         type="button"
-        class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
+        class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions js-vue-tooltip"
         title="Manual job"
         data-toggle="dropdown"
         data-placement="top"
         aria-label="Manual job"
-        ref="tooltip"
         :disabled="isLoading">
         ${playIconSvg}
         <i

app/assets/javascripts/pipelines/components/time_ago.js

@@ -85,7 +85,7 @@ export default {
           aria-hidden="true" />
         <time
-          ref="tooltip"
+          class="js-vue-tooltip"
           data-toggle="tooltip"
           data-placement="top"
           data-container="body"

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -86,8 +86,7 @@ export default {
         <a
           :href="user.path"
           :title="user.email"
-          class="js-user-link commit-committer-link"
-          ref="tooltip">
+          class="js-user-link js-vue-tooltip commit-committer-link">
           <user-avatar-image
             :img-src="user.avatar_url"

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

@@ -95,12 +95,11 @@
         <div class="toolbar-group">
           <button
             aria-label="Go full screen"
-            class="toolbar-btn js-zen-enter"
+            class="toolbar-btn js-zen-enter js-vue-tooltip"
             data-container="body"
             tabindex="-1"
             title="Go full screen"
-            type="button"
-            ref="tooltip">
+            type="button">
             <i
               aria-hidden="true"
               class="fa fa-arrows-alt fa-fw">

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

@@ -40,9 +40,8 @@
 <template>
   <button
     type="button"
-    class="toolbar-btn js-md hidden-xs"
+    class="toolbar-btn js-md hidden-xs js-vue-tooltip"
     tabindex="-1"
-    ref="tooltip"
     data-container="body"
     :data-md-tag="tag"
     :data-md-block="tagBlock"

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -48,11 +48,10 @@ export default {
 <template>
   <time
     :class="[timeagoCssClass, cssClass]"
-    class="js-timeago js-timeago-render"
+    class="js-timeago js-timeago-render js-vue-tooltip"
     :title="tooltipTitle(time)"
     :data-placement="tooltipPlacement"
-    data-container="body"
-    ref="tooltip">
+    data-container="body">
     {{timeFormated(time)}}
   </time>
 </template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -72,7 +72,7 @@ export default {
 <template>
   <img
-    class="avatar"
+    class="avatar js-vue-tooltip"
     :class="[avatarSizeClass, cssClasses]"
     :src="imageSource"
     :width="size"
@@ -81,6 +81,5 @@ export default {
     :data-container="tooltipContainer"
     :data-placement="tooltipPlacement"
     :title="tooltipText"
-    ref="tooltip"
   />
 </template>

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

+function $filterFind(el, selector) {
+  return $(el)
+    .find('*')         // Take the current selection and find all descendants,
+    .addBack()         // add the original selection back to the set
+    .filter(selector); // and filter by the selector.
+}
+
 export default {
   mounted() {
-    $(this.$refs.tooltip).tooltip();
+    $filterFind(this.$el, '.js-vue-tooltip').tooltip();
   },
   updated() {
-    $(this.$refs.tooltip).tooltip('fixTitle');
+    $filterFind(this.$el, '.js-vue-tooltip').tooltip('fixTitle');
   },
   beforeDestroy() {
-    $(this.$refs.tooltip).tooltip('destroy');
+    $filterFind(this.$el, '.js-vue-tooltip').tooltip('destroy');
   },
 };

doc/development/fe_guide/style_guide_js.md

@@ -463,20 +463,24 @@ A forEach will cause side effects, it will be mutating the array being iterated.
   1. `destroyed`
 #### Vue and Boostrap
-1. Tooltips: Do not rely on `has-tooltip` class name for vue components
+1. Tooltips: Do not rely on `has-tooltip` class name for Vue components
   ```javascript
     // bad
-    <span class="has-tooltip">
+    <span
+      class="has-tooltip"
+      title="Some tooltip text">
       Text
     </span>
     // good
-    <span data-toggle="tooltip">
+    <span
+      class="js-vue-tooltip"
+      title="Some tooltip text">
       Text
     </span>
   ```
-1. Tooltips: When using a tooltip, include the tooltip mixin
+1. Tooltips: When using a tooltip, include the tooltip mixin, `./app/assets/javascripts/vue_shared/mixins/tooltip.js`
 1. Don't change `data-original-title`.
   ```javascript

spec/javascripts/vue_shared/mixins/tooltip_spec.js

+import Vue from 'vue';
+import tooltipMixin from '~/vue_shared/mixins/tooltip';
+
+describe('Tooltip mixin', () => {
+  let vm;
+
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+  });
+
+  describe('with a single tooltip', () => {
+    beforeEach(() => {
+      const SomeComponent = Vue.extend({
+        mixins: [
+          tooltipMixin,
+        ],
+        template: `
+          <div
+            class="js-vue-tooltip"
+            title="foo">
+          </div>
+        `,
+      });
+
+      vm = new SomeComponent().$mount();
+    });
+
+    it('should have tooltip plugin applied', () => {
+      expect($(vm.$el).data('bs.tooltip')).toBeDefined();
+    });
+  });
+
+  describe('with multiple tooltips', () => {
+    beforeEach(() => {
+      const SomeComponent = Vue.extend({
+        mixins: [
+          tooltipMixin,
+        ],
+        template: `
+          <div>
+            <div
+              class="js-vue-tooltip"
+              title="foo">
+            </div>
+            <div
+              class="js-vue-tooltip"
+              title="bar">
+            </div>
+          </div>
+        `,
+      });
+
+      vm = new SomeComponent().$mount();
+    });
+
+    it('should have tooltip plugin applied to all instances', () => {
+      expect($(vm.$el).find('.js-vue-tooltip').data('bs.tooltip')).toBeDefined();
+    });
+  });
+});