Uses tooltip vue directive in issue card component

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -2,6 +2,7 @@
   import $ from 'jquery';
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
   const Store = gl.issueBoards.BoardsStore;
 
@@ -9,6 +10,9 @@
     components: {
       UserAvatarLink,
     },
+    directives: {
+      tooltip,
+    },
     props: {
       issue: {
         type: Object,
@@ -166,9 +170,10 @@
           tooltip-placement="bottom"
         />
         <span
+          v-tooltip
           v-if="shouldRenderCounter"
           :title="assigneeCounterTooltip"
-          class="avatar-counter has-tooltip"
+          class="avatar-counter"
         >
           {{ assigneeCounterLabel }}
         </span>
@@ -179,12 +184,13 @@
       class="board-card-footer"
     >
       <button
+        v-tooltip
         v-for="label in issue.labels"
         v-if="showLabel(label)"
         :key="label.id"
         :style="labelStyle(label)"
         :title="label.description"
-        class="badge color-label has-tooltip"
+        class="badge color-label"
         type="button"
         data-container="body"
         @click="filterByLabel(label, $event)"

spec/javascripts/boards/issue_card_spec.js

@@ -255,7 +255,7 @@ describe('Issue card component', () => {
     it('renders label', () => {
       const nodes = [];
       component.$el.querySelectorAll('.badge').forEach((label) => {
-        nodes.push(label.title);
+        nodes.push(label.getAttribute('data-original-title'));
       });
 
       expect(
@@ -265,7 +265,7 @@ describe('Issue card component', () => {
 
     it('sets label description as title', () => {
       expect(
-        component.$el.querySelector('.badge').getAttribute('title'),
+        component.$el.querySelector('.badge').getAttribute('data-original-title'),
       ).toContain(label1.description);
     });