Merge branch 'ee-fl-boards-tech-debt' into 'master'

EE port of Uses tooltip vue directive in issue card component

See merge request gitlab-org/gitlab-ee!6309

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

@@ -3,6 +3,7 @@
   import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
   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;
 
@@ -11,6 +12,9 @@
       UserAvatarLink,
       IssueCardWeight,
     },
+    directives: {
+      tooltip,
+    },
     props: {
       issue: {
         type: Object,
@@ -172,9 +176,10 @@
           tooltip-placement="bottom"
         />
         <span
+          v-tooltip
           v-if="shouldRenderCounter"
           :title="assigneeCounterTooltip"
-          class="avatar-counter has-tooltip"
+          class="avatar-counter"
         >
           {{ assigneeCounterLabel }}
         </span>
@@ -185,12 +190,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

@@ -258,7 +258,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(
@@ -268,7 +268,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);
     });