feat: tooltip and popover components

components/http/BodyParameters.vue

@@ -6,7 +6,8 @@
           <label for="reqParamList">{{ $t("request_body") }}</label>
           <div>
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('bodyParams', $event)"
             >
@@ -68,7 +69,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="{
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
               content: param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
@@ -113,7 +115,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="$t('delete')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('delete')"
             class="icon button"
             @click="removeRequestBodyParam(index)"
           >

components/http/CodegenModal.vue

@@ -11,38 +11,35 @@
     <template #body>
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
-        <v-popover>
-          <pre v-if="requestType">{{
-            codegens.find((x) => x.id === requestType).name
-          }}</pre>
-          <input
-            v-else
-            id="requestType"
-            v-model="requestType"
-            :placeholder="$t('choose_language')"
-            class="input cursor-pointer"
-            readonly
-            autofocus
-          />
-          <template #popover>
-            <div v-for="gen in codegens" :key="gen.id">
-              <button
-                v-close-popover
-                class="icon button"
-                @click="requestType = gen.id"
-              >
-                {{ gen.name }}
-              </button>
-            </div>
+        <tippy trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <pre v-if="requestType">{{
+              codegens.find((x) => x.id === requestType).name
+            }}</pre>
+            <input
+              v-else
+              id="requestType"
+              v-model="requestType"
+              :placeholder="$t('choose_language')"
+              class="input cursor-pointer"
+              readonly
+              autofocus
+            />
           </template>
-        </v-popover>
+          <div v-for="gen in codegens" :key="gen.id">
+            <button class="icon button" @click="requestType = gen.id">
+              {{ gen.name }}
+            </button>
+          </div>
+        </tippy>
       </span>
       <div class="row-wrapper">
         <label for="generatedCode">{{ $t("generated_code") }}</label>
         <div>
           <button
             ref="copyRequestCode"
-            v-tooltip="$t('copy_code')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('copy_code')"
             class="icon button"
             @click="copyRequestCode"
           >

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)"
           >

components/http/Parameters.vue

@@ -6,7 +6,8 @@
           <label for="paramList">{{ $t("parameter_list") }}</label>
           <div>
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('parameters', $event)"
             >
@@ -82,7 +83,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="{
+            v-tippy="{ theme: 'tooltip' }"
+            title="{
               content: param.hasOwnProperty('active')
                 ? param.active
                   ? $t('turn_off')
@@ -112,7 +114,8 @@
       <div>
         <li>
           <button
-            v-tooltip.bottom="$t('delete')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('delete')"
             class="icon button"
             @click="removeRequestParam(index)"
           >

components/http/RawBody.vue

@@ -8,7 +8,8 @@
             <button
               v-if="rawInput && contentType.endsWith('json')"
               ref="prettifyRequest"
-              v-tooltip="$t('prettify_body')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('prettify_body')"
               class="icon button"
               @click="prettifyRequestBody"
             >
@@ -16,7 +17,8 @@
             </button>
             <label for="payload" class="p-0">
               <button
-                v-tooltip="$t('import_json')"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('import_json')"
                 class="icon button"
                 @click="$refs.payload.click()"
               >
@@ -31,7 +33,8 @@
               @change="uploadPayload"
             />
             <button
-              v-tooltip.bottom="$t('clear')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('clear')"
               class="icon button"
               @click="clearContent('rawParams', $event)"
             >

components/http/TokenList.vue

@@ -13,7 +13,8 @@
         <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
           <button
-            v-tooltip.bottom="$t('clear')"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('clear')"
             class="icon button"
             @click="clearContent('tokens', $event)"
           >
@@ -41,7 +42,8 @@
         <div class="row-wrapper">
           <li>
             <button
-              v-tooltip.bottom="$t('use_token')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('use_token')"
               class="icon button"
               @click="useOAuthToken(token.value)"
             >
@@ -50,7 +52,8 @@
           </li>
           <li>
             <button
-              v-tooltip.bottom="$t('delete')"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
               class="icon button"
               @click="removeOAuthToken(index)"
             >