rewrite ModerationTools using v-tooltip

src/components/moderation_tools/moderation_tools.js

@@ -1,5 +1,4 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -29,8 +28,7 @@ const ModerationTools = {
     }
   },
   components: {
-    DialogModal,
-    Popper
+    DialogModal
   },
   computed: {
     tagsSet () {
@@ -41,9 +39,6 @@ const ModerationTools = {
     }
   },
   methods: {
-    toggleMenu () {
-      this.showDropDown = !this.showDropDown
-    },
     hasTag (tagName) {
       return this.tagsSet.has(tagName)
     },

src/components/moderation_tools/moderation_tools.vue

@@ -1,18 +1,13 @@
 <template>
   <div>
-    <Popper
+    <v-popover
       trigger="click"
-      append-to-body
-      :options="{
-        placement: 'bottom-end',
-        modifiers: {
-          arrow: { enabled: true },
-          offset: { offset: '0, 5px' },
-        }
-      }"
+      class="moderation-tools-popover"
+      :container="false"
+      @show="showDropDown = true"
       @hide="showDropDown = false"
     >
-      <div class="popper-wrapper">
+      <div class="popper-wrapper" slot="popover">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -127,14 +122,12 @@
         </div>
       </div>
       <button
-        slot="reference"
         class="btn btn-default btn-block"
         :class="{ pressed: showDropDown }"
-        @click="toggleMenu"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
-    </Popper>
+    </v-popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
@@ -188,4 +181,11 @@
   }
 }
 
+.moderation-tools-popover {
+  height: 100%;
+  .trigger {
+    display: flex !important;
+    height: 100%;
+  }
+}
 </style>