Tooltip mixin doesn't support multiple tooltips in the same Vue component

The Vue tooltip mixin doesn't support multiple tooltips in the same Vue component.

this.$refs.tooltip only represents a single element and is holds the latest ref="tooltip" in the DOM for a given component.

In this example, only bar will get a tooltip

<script>
import tooltipMixin from '../../vue_shared/mixins/tooltip';

export default {
  mixins: [
    tooltipMixin,
  ],
};
</script>
<template>
  <div
    title="fooooooooooooooooooooooo"
    ref="tooltip">
    foo
  </div>
  <div
    title="baaaaaaaaaaaaaaaaaaarrrr"
    ref="tooltip">
    bar
  </div>
</template>

---

Current usage with multiple tooltips that is broken:

• pipeline_url, https://gitlab.com/gitlab-org/gitlab-ce/blob/97d6085fb507d53f92699d5cfea06dd319125994/app/assets/javascripts/pipelines/components/pipeline_url.vue#L49
• job_component has multiple but only one of the elements is shown at a time. I suspect if the data changed to not have a path, the tooltip wouldn't show, https://gitlab.com/gitlab-org/gitlab-ce/blob/97d6085fb507d53f92699d5cfea06dd319125994/app/assets/javascripts/pipelines/components/graph/job_component.vue#L84
• Need to use this in issue_token, https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1816#note_31261056

---

We could workaround and use the existing mixin code by creating new Vue components to nest in order to get a new fresh namespace.

---

cc @filipa

changed the description

Some other options, wdyt?

• Modify the mixin to apply to any ref with a tooltip prefix, tooltip-foo, tooltip-bar.
• Use a .js-tooltip type class and apply to this.$el.querySelectorAll('.js-tooltip')

Some architectural discussion https://gitlab.slack.com/archives/C4GFEUG90/p1496761120641724 (no conclusions)

mentioned in merge request !11954 (merged)

mentioned in commit 83e66eef

assigned to @MadLittleMods

Not so sure on this change. Maybe instead of using ref or a class name we use a directive https://vuejs.org/v2/guide/custom-directive.html so we just put v-tooltip on the element & then it handles the adding of the tooltip & the updating of the title.

@iamphill, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11954#note_31708956

---

Let's go with the directive :)

@filipa, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11954#note_31735591

Another thing to decide on is how to include the custom directive. Discussion here, https://gitlab.slack.com/archives/C4GFEUG90/p1496848702603389

• Use the directives property, just like mixins or components on the Vue component, https://vuejs.org/v2/api/#directives
• Use a plugin. Should we include all directives in the plugin Vue.use(GlDirectives) or separate plugins for each directive, https://vuejs.org/v2/guide/plugins.html

From some more discussion, directives property under mixins sounds like the way we are preferring, https://gitlab.slack.com/archives/C4GFEUG90/p1496943048503134

mentioned in commit 6cb575d6

closed via merge request !11954 (merged)

mentioned in merge request !14785