chore: improvements to tooltips and popovers

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

@@ -138,17 +138,20 @@ a {
   }
 }
 
-.tippy-box[data-theme="tooltip"] {
+.tippy-box[data-theme~="tooltip"] {
   @apply bg-tooltip;
-  @apply text-primary;
+  @apply border-solid border-tooltip;
+  @apply rounded;
+  @apply shadow;
+
+  .tippy-content {
+    @apply flex;
+    @apply text-tiny text-primary;
     @apply font-semibold;
     @apply py-1 px-2;
-  @apply rounded;
     @apply truncate;
-  @apply shadow;
     @apply leading-normal;
     @apply items-center;
-  font-size: 86%;
 
     kbd {
       @apply hidden;
@@ -162,39 +165,52 @@ a {
       @apply sm: inline-flex;
     }
 
-  .tippy-svg-arrow svg {
-    @apply fill-tooltip;
-  }
-
     .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 bg-popover;
+  @apply border-solid border-dividerDark;
+  @apply rounded;
+  @apply shadow-lg;
+
+  .tippy-content {
     @apply flex flex-col;
     @apply max-h-56;
     @apply items-stretch;
     @apply overflow-y-auto;
-  @apply bg-popover;
     @apply text-secondary text-body;
     @apply p-2;
-  @apply shadow-lg;
     @apply leading-normal;
-  @apply border border-dividerDark;
     @apply focus: outline-none;
     scroll-behavior: smooth;
+  }
 
-  .tippy-svg-arrow svg {
+  .tippy-svg-arrow {
+    svg:first-child {
+      @apply fill-dividerDark;
+    }
+
+    svg:last-child {
       @apply fill-popover;
     }
-}
+  }
-
-.tippy-content {
-  @apply p-0;
 }
 
 [data-v-tippy] {

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

@@ -100,6 +100,15 @@
                 "
               />
               <template #content="{ hide }">
+                <div
+                  ref="tippyActions"
+                  class="flex flex-col focus:outline-none"
+                  tabindex="0"
+                  @keyup.enter="profile.$el.click()"
+                  @keyup.s="settings.$el.click()"
+                  @keyup.l="logout.$el.click()"
+                  @keyup.escape="hide()"
+                >
                   <div class="flex flex-col px-2 text-tiny">
                     <span class="inline-flex font-semibold truncate">
                       {{
@@ -112,15 +121,6 @@
                     </span>
                   </div>
                   <hr />
-                <div
-                  ref="tippyActions"
-                  class="flex flex-col focus:outline-none"
-                  tabindex="0"
-                  @keyup.enter="profile.$el.click()"
-                  @keyup.s="settings.$el.click()"
-                  @keyup.l="logout.$el.click()"
-                  @keyup.escape="hide()"
-                >
                   <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,11 +152,21 @@
             :on-shown="() => saveTippyActions.focus()"
           >
             <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('app.options')"
               :icon="IconChevronDown"
               filled
               class="rounded rounded-l-none"
             />
             <template #content="{ hide }">
+              <div
+                ref="saveTippyActions"
+                class="flex flex-col focus:outline-none"
+                tabindex="0"
+                @keyup.c="copyRequestAction.$el.click()"
+                @keyup.s="saveRequestAction.$el.click()"
+                @keyup.escape="hide()"
+              >
                 <input
                   id="request-name"
                   v-model="requestName"
@@ -159,14 +177,6 @@
                   class="mb-2 input !bg-primaryContrast"
                   @keyup.enter="hide()"
                 />
-              <div
-                ref="saveTippyActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.c="copyRequestAction.$el.click()"
-                @keyup.s="saveRequestAction.$el.click()"
-                @keyup.escape="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: [