[ci skip] use tooltip directive

app/assets/javascripts/notes/components/issue_discussion.vue

@@ -136,7 +136,8 @@
               :edited-at="note.last_updated_at"
               :edited-by="note.last_updated_by"
               action-text="Last updated"
-              className="discussion-headline-light js-discussion-headline" />
+              class-name="discussion-headline-light js-discussion-headline"
+              />
             </div>
           </div>
           <div
@@ -149,7 +150,7 @@
                     v-for="note in note.notes"
                     :is="componentName(note)"
                     :note="componentData(note)"
-                    key="note.id"
+                    :key="note.id"
                     />
                 </ul>
                 <div class="flash-container"></div>

app/assets/javascripts/notes/components/issue_note_actions.vue

@@ -3,6 +3,7 @@
   import emojiSmile from 'icons/_emoji_smile.svg';
   import emojiSmiley from 'icons/_emoji_smiley.svg';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
     props: {
@@ -44,6 +45,9 @@
         required: true,
       },
     },
+    directives: {
+      tooltip,
+    },
     data() {
       return {
         emojiSmiling,
@@ -76,9 +80,10 @@
       {{accessLevel}}
     </span>
     <a
+      v-tooltip
       v-if="canAddAwardEmoji"
       :class="{ 'js-user-authored': isAuthoredByMe }"
-      class="note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip"
+      class="note-action-button note-emoji-button js-add-award js-note-emoji"
       data-position="right"
       href="#"
       title="Add reaction">
@@ -100,9 +105,10 @@
       v-if="shouldShowActionsDropdown"
       class="dropdown more-actions">
       <button
+        v-tooltip
         type="button"
         title="More actions"
-        class="note-action-button more-actions-toggle has-tooltip btn btn-transparent"
+        class="note-action-button more-actions-toggle btn btn-transparent"
         data-toggle="dropdown"
         data-container="body">
           <i

app/assets/javascripts/notes/components/issue_note_awards_list.vue

@@ -6,6 +6,7 @@
   import emojiSmile from 'icons/_emoji_smile.svg';
   import emojiSmiley from 'icons/_emoji_smiley.svg';
   import * as Emoji from '../../emoji';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
     props: {
@@ -26,6 +27,9 @@
         required: true,
       },
     },
+    directives: {
+      tooltip,
+    },
     data() {
       const userId = window.gon.current_user_id;
 
@@ -154,9 +158,6 @@
         };
 
         this.toggleAward(data)
-          .then(() => {
-            $(this.$el).find('.award-control').tooltip('fixTitle');
-          })
           .catch(() => Flash('Something went wrong on our end.'));
       },
     },
@@ -167,11 +168,12 @@
   <div class="note-awards">
     <div class="awards js-awards-block">
       <button
+        v-tooltip
         v-for="(awardList, awardName) in groupedAwards"
         :class="getAwardClassBindings(awardList, awardName)"
         :title="awardTitle(awardList)"
         @click="handleAward(awardName)"
-        class="btn award-control has-tooltip"
+        class="btn award-control"
         data-placement="bottom"
         type="button">
         <span v-html="getAwardHTML(awardName)"></span>
@@ -183,8 +185,9 @@
         v-if="canAward"
         class="award-menu-holder">
         <button
+          v-tooltip
           :class="{ 'js-user-authored': isAuthoredByMe }"
-          class="award-control btn has-tooltip js-add-award"
+          class="award-control btn js-add-award"
           title="Add reaction"
           aria-label="Add reaction"
           data-placement="bottom"