feat: tooltip and popover components

components/http/Headers.vue

@@ -6,7 +6,8 @@
           <label for="headerList">{{ $t("header_list") }}</label>
           <div>
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('headers', $event)"
             >
@@ -63,7 +64,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="{
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
               content: header.hasOwnProperty('active')
                 ? header.active
                   ? $t('turn_off')
@@ -93,7 +95,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="$t('delete')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('delete')"
             class="icon button"
             @click="removeRequestHeader(index)"
           >