chore: improvements to tooltips and popovers

packages/hoppscotch-app/assets/scss/styles.scss

@@ -138,63 +138,79 @@ a {
   }
 }
 
-.tippy-box[data-theme="tooltip"] {
+.tippy-box[data-theme~="tooltip"] {
   @apply bg-tooltip;
-  @apply text-primary;
+  @apply border-solid border-tooltip;
-  @apply font-semibold;
-  @apply py-1 px-2;
   @apply rounded;
-  @apply truncate;
   @apply shadow;
-  @apply leading-normal;
-  @apply items-center;
-  font-size: 86%;
 
-  kbd {
+  .tippy-content {
-    @apply hidden;
+    @apply flex;
-    @apply font-sans;
+    @apply text-tiny text-primary;
-    @apply bg-gray-500/45;
+    @apply font-semibold;
-    @apply text-primaryLight;
+    @apply py-1 px-2;
-    @apply rounded-sm;
-    @apply px-1;
-    @apply my-0 ml-1;
     @apply truncate;
-    @apply sm: inline-flex;
+    @apply leading-normal;
-  }
-
-  .tippy-svg-arrow svg {
-    @apply fill-tooltip;
-  }
-
-  .env-icon {
-    @apply inline-flex;
     @apply items-center;
-    @apply mr-1;
+
-    @apply text-accentDark;
+    kbd {
+      @apply hidden;
+      @apply font-sans;
+      @apply bg-gray-500/45;
+      @apply text-primaryLight;
+      @apply rounded-sm;
+      @apply px-1;
+      @apply my-0 ml-1;
+      @apply truncate;
+      @apply sm: inline-flex;
+    }
+
+    .env-icon {
+      @apply inline-flex;
+      @apply items-center;
+      @apply mr-1;
+      @apply text-accentDark;
+    }
+  }
+
+  .tippy-svg-arrow {
+    svg:first-child {
+      @apply fill-tooltip;
+    }
+
+    svg:last-child {
+      @apply fill-tooltip;
+    }
   }
 }
 
-.tippy-box[data-theme="popover"] {
+.tippy-box[data-theme~="popover"] {
-  @apply flex flex-col;
-  @apply max-h-56;
-  @apply items-stretch;
-  @apply overflow-y-auto;
   @apply bg-popover;
-  @apply text-secondary text-body;
+  @apply border-solid border-dividerDark;
-  @apply p-2;
+  @apply rounded;
   @apply shadow-lg;
-  @apply leading-normal;
-  @apply border border-dividerDark;
-  @apply focus: outline-none;
-  scroll-behavior: smooth;
 
-  .tippy-svg-arrow svg {
+  .tippy-content {
-    @apply fill-popover;
+    @apply flex flex-col;
+    @apply max-h-56;
+    @apply items-stretch;
+    @apply overflow-y-auto;
+    @apply text-secondary text-body;
+    @apply p-2;
+    @apply leading-normal;
+    @apply focus: outline-none;
+    scroll-behavior: smooth;
   }
-}
 
-.tippy-content {
+  .tippy-svg-arrow {
-  @apply p-0;
+    svg:first-child {
+      @apply fill-dividerDark;
+    }
+
+    svg:last-child {
+      @apply fill-popover;
+    }
+  }
 }
 
 [data-v-tippy] {

packages/hoppscotch-app/src/components/app/Header.vue

@@ -100,18 +100,6 @@
                 "
               />
               <template #content="{ hide }">
-                <div class="flex flex-col px-2 text-tiny">
-                  <span class="inline-flex font-semibold truncate">
-                    {{
-                      currentUser.displayName ||
-                      t("profile.default_hopp_displayname")
-                    }}
-                  </span>
-                  <span class="inline-flex truncate text-secondaryLight">
-                    {{ currentUser.email }}
-                  </span>
-                </div>
-                <hr />
                 <div
                   ref="tippyActions"
                   class="flex flex-col focus:outline-none"
@@ -121,6 +109,18 @@
                   @keyup.l="logout.$el.click()"
                   @keyup.escape="hide()"
                 >
+                  <div class="flex flex-col px-2 text-tiny">
+                    <span class="inline-flex font-semibold truncate">
+                      {{
+                        currentUser.displayName ||
+                        t("profile.default_hopp_displayname")
+                      }}
+                    </span>
+                    <span class="inline-flex truncate text-secondaryLight">
+                      {{ currentUser.email }}
+                    </span>
+                  </div>
+                  <hr />
                   <SmartItem
                     ref="profile"
                     to="/profile"

packages/hoppscotch-app/src/components/http/Request.vue

@@ -60,8 +60,10 @@
     <div class="flex mt-2 sm:mt-0">
       <ButtonPrimary
         id="send"
-        class="flex-1 rounded-r-none min-w-20"
+        v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+        :title="`${t('action.send')} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
         :label="`${!loading ? t('action.send') : t('action.cancel')}`"
+        class="flex-1 rounded-r-none min-w-20"
         @click="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -72,9 +74,11 @@
           :on-shown="() => sendTippyActions.focus()"
         >
           <ButtonPrimary
-            class="rounded-l-none"
+            v-tippy="{ theme: 'tooltip' }"
-            filled
+            :title="t('app.options')"
             :icon="IconChevronDown"
+            filled
+            class="rounded-l-none"
           />
           <template #content="{ hide }">
             <div
@@ -130,10 +134,14 @@
         class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
       >
         <ButtonSecondary
-          class="flex-1 rounded rounded-r-none"
+          v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+          :title="`${t(
+            'request.save'
+          )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
           :label="COLUMN_LAYOUT ? `${t('request.save')}` : ''"
           filled
           :icon="IconSave"
+          class="flex-1 rounded rounded-r-none"
           @click="saveRequest()"
         />
         <span class="flex">
@@ -144,21 +152,13 @@
             :on-shown="() => saveTippyActions.focus()"
           >
             <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('app.options')"
               :icon="IconChevronDown"
               filled
               class="rounded rounded-l-none"
             />
             <template #content="{ hide }">
-              <input
-                id="request-name"
-                v-model="requestName"
-                :placeholder="`${t('request.name')}`"
-                name="request-name"
-                type="text"
-                autocomplete="off"
-                class="mb-2 input !bg-primaryContrast"
-                @keyup.enter="hide()"
-              />
               <div
                 ref="saveTippyActions"
                 class="flex flex-col focus:outline-none"
@@ -167,6 +167,16 @@
                 @keyup.s="saveRequestAction.$el.click()"
                 @keyup.escape="hide()"
               >
+                <input
+                  id="request-name"
+                  v-model="requestName"
+                  :placeholder="`${t('request.name')}`"
+                  name="request-name"
+                  type="text"
+                  autocomplete="off"
+                  class="mb-2 input !bg-primaryContrast"
+                  @keyup.enter="hide()"
+                />
                 <SmartItem
                   ref="copyRequestAction"
                   :label="shareButtonText"
@@ -265,6 +275,7 @@ import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 

packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -86,16 +86,19 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
         arrow: true,
         create() {
           const dom = document.createElement("span")
+          const tooltipContainer = document.createElement("span")
           const kbd = document.createElement("kbd")
           const icon = document.createElement("span")
           icon.innerHTML = envTypeIcon
+          icon.className = "env-icon"
           kbd.textContent = finalEnv
-          dom.appendChild(icon)
+          tooltipContainer.appendChild(icon)
-          dom.appendChild(document.createTextNode(`${envName} `))
+          tooltipContainer.appendChild(document.createTextNode(`${envName} `))
-          dom.appendChild(kbd)
+          tooltipContainer.appendChild(kbd)
+          tooltipContainer.className = "tippy-content"
           dom.className = "tippy-box"
           dom.dataset.theme = "tooltip"
-          icon.className = "env-icon"
+          dom.appendChild(tooltipContainer)
           return { dom }
         },
       }

packages/hoppscotch-app/src/helpers/editor/themes/baseTheme.ts

@@ -103,10 +103,10 @@ export const baseTheme = EditorView.theme({
     borderRadius: "4px",
   },
   ".cm-tooltip-arrow:after": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
   },
   ".cm-tooltip-arrow:before": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul": {
     fontFamily: "var(--font-mono)",
@@ -235,10 +235,10 @@ export const inputTheme = EditorView.theme({
     borderRadius: "4px",
   },
   ".cm-tooltip-arrow:after": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
   },
   ".cm-tooltip-arrow:before": {
-    borderColor: "transparent !important",
+    borderTopColor: "var(--tooltip-color) !important",
   },
   ".cm-tooltip.cm-tooltip-autocomplete > ul": {
     fontFamily: "var(--font-mono)",

packages/hoppscotch-app/src/modules/tippy.ts

@@ -1,8 +1,10 @@
 import { HoppModule } from "."
-import VueTippy, { setDefaultProps } from "vue-tippy"
+import VueTippy, { roundArrow, setDefaultProps } from "vue-tippy"
 
 import "tippy.js/dist/tippy.css"
 import "tippy.js/animations/scale-subtle.css"
+import "tippy.js/dist/border.css"
+import "tippy.js/dist/svg-arrow.css"
 
 export default <HoppModule>{
   onVueAppInit(app) {
@@ -13,7 +15,7 @@ export default <HoppModule>{
       appendTo: document.body,
       allowHTML: false,
       animateFill: false,
-      arrow: false,
+      arrow: roundArrow + roundArrow,
       popperOptions: {
         // https://popper.js.org/docs/v2/utils/detect-overflow/
         modifiers: [