fix: tip is not displayed completely on boundaries (#321)

Co-authored-by: YF <YF>
Co-authored-by: Anthony Fu <github@antfu.me>

package.json

@@ -31,6 +31,7 @@
     "@vueuse/core": "^10.9.0",
     "dexie": "^4.0.1",
     "file-saver": "^2.0.5",
+    "floating-vue": "^5.2.2",
     "fzf": "^0.5.2",
     "hotkeys-js": "^3.13.7",
     "iconify-icon": "^2.0.0",

src/App.vue

@@ -1,9 +1,7 @@
 <script setup lang='ts'>
-import { themeColor } from './store'
+import { useThemeColor } from './hooks'
 
-const style = computed<any>(() => ({
-  '--theme-color': themeColor.value,
-}))
+const { style } = useThemeColor()
 </script>
 
 <template>

src/components/Icons.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { getSearchHighlightHTML } from '../hooks'
+import { Tooltip } from 'floating-vue'
+import { getSearchHighlightHTML, useThemeColor } from '../hooks'
 
 defineProps({
   icons: {
@@ -36,44 +37,41 @@ defineProps({
     default: 'text-dark-600 dark:text-dark-900',
   },
 })
-
 defineEmits<{
   (event: 'select', id: string): void
 }>()
+
+const { style } = useThemeColor()
 </script>
 
 <template>
-  <div
-    class="non-dragging flex flex-wrap select-none justify-center"
-    :class="`text-${size} ${colorClass}`"
-  >
+  <div class="non-dragging flex flex-wrap select-none justify-center" :class="`text-${size} ${colorClass}`">
     <div
-      v-for="icon of icons"
-      :key="icon"
-      class="non-dragging icons-item flex tooltip"
+      v-for="icon of icons " :key="icon" class="non-dragging icons-item relative"
       :class="[spacing, selected.includes(namespace + icon) ? 'active' : '']"
       @click="$emit('select', namespace + icon)"
     >
-      <Icon
-        :key="icon"
-        class="tooltip-content non-dragging leading-none h-1em"
-        :cache="true"
-        :icon="namespace + icon"
-      />
-      <span
-        v-if="display === 'list'"
-        class="tooltip-content text-sm ml-1 px-1 m-auto"
-        v-html="getSearchHighlightHTML(icon, search)"
-      />
-      <span
-        v-else
-        border="~ dark-only"
-        class="tooltip-text bg-base shadow leading-none whitespace-nowrap z-100"
-      >
-        <span class="opacity-75">
-          {{ icon }}
-        </span>
-      </span>
+      <div v-if="display === 'list'" class="icon-border flex gap-1">
+        <Icon
+          :key="icon" class="non-dragging leading-none" :cache="true"
+          :icon="namespace + icon"
+        />
+        <span
+          class="text-sm px-1 m-auto"
+          v-html="getSearchHighlightHTML(icon, search)"
+        />
+      </div>
+      <Tooltip v-else placement="bottom">
+        <Icon
+          :key="icon" class="non-dragging leading-none icon-border h-1em" :cache="true"
+          :icon="namespace + icon"
+        />
+        <template #popper>
+          <div :style="style" class="leading-none border-none z-100 text-primary opacity-75 text-sm">
+            {{ icon }}
+          </div>
+        </template>
+      </Tooltip>
     </div>
   </div>
 </template>
@@ -82,9 +80,13 @@ defineEmits<{
 .icons-item:hover,
 .icons-item.active {
   color: var(--theme-color);
+}
+
+.icon-border {
   position: relative;
 }
-.icons-item.active::after {
+
+.icon-border.active::after {
   content: '';
   position: absolute;
   top: -3px;
@@ -95,7 +97,8 @@ defineEmits<{
   background: var(--theme-color);
   opacity: 0.1;
 }
-.icons-item:hover::before {
+
+.icon-border:hover::before {
   content: '';
   position: absolute;
   top: -4px;

src/hooks/color.ts

@@ -0,0 +1,11 @@
+import { themeColor } from '../store'
+
+export function useThemeColor() {
+  const style = computed<any>(() => ({
+    '--theme-color': themeColor.value,
+  }))
+
+  return {
+    style,
+  }
+}

src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './search'
+export * from './color'

src/hooks/search.ts

@@ -138,7 +138,13 @@ export function useSearch(collection: Ref<CollectionMeta | null>) {
   }
 }
 
-export function getSearchHighlightHTML(text: string, search: string, baseClass = 'text-gray-500', activeClass = 'text-primary') {
+// @unocss-include
+export function getSearchHighlightHTML(
+  text: string,
+  search: string,
+  baseClass = 'color-fade',
+  activeClass = 'text-primary',
+) {
   const start = text.indexOf(search || '')
 
   if (!search || start < 0)

src/main.css

@@ -71,31 +71,16 @@ html.dark {
 }
 
 /* Tootip */
-.tooltip {
-  position: relative;
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: important-bg-base;
 }
 
-.tooltip .tooltip-text {
-  visibility: hidden;
-  font-size: 14px;
-  text-align: center;
-  border-radius: 4px;
-  position: absolute;
-  z-index: 1;
-  padding: 5px 8px;
-  top: 135%;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-  @apply whitespace-nowrap;
-}
-
-@media (hover: hover) {
-  .tooltip:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-  }
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  --uno: important-border-none;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: border border-base;
 }
 
 /* fallback black svg in dark mode */

src/main.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router
 import { disableCache } from 'iconify-icon'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
+import 'floating-vue/dist/style.css'
 import './utils/electron'
 import './main.css'
 import 'uno.css'