Tooltip (#4633)

* add hover to tooltip and changed the icon

* add floating box for icons

* allows you to stay on the note when hovered on the tooltip

docs/.vitepress/theme/components/Tooltip.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{ title?: string; icon?: string }>(),
@@ -8,16 +9,19 @@ const props = withDefaults(
 )
 
 const resolvedIcon = computed(() => withBase(props.icon))
+
+const isHoverable = useMediaQuery('(hover: hover)')
+const triggers = computed(() => isHoverable.value ? ['hover'] : ['click'])
 </script>
 
 <template>
-  <VDropdown :triggers="['click']" :auto-hide="true" :distance="15" placement="auto">
+  <VDropdown :triggers="triggers" :popper-triggers="triggers" :delay="{ show: 50, hide: 50 }" :auto-hide="true" :distance="15" placement="auto">
     <button
       aria-label="Tooltip"
-      class="text-brand-1 relative inline-flex align-middle items-center justify-center leading-none p-0 select-none font-bold cursor-pointer transition-all h-[1em] w-[1.7em]"
+      class="text-brand-1 relative inline-flex align-middle items-center justify-center leading-none p-0 select-none font-bold cursor-pointer transition-all h-[1.2em] w-[1.5em]"
     >
       <div
-        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-2.5 w-[1.6em] h-[1.6em] bg-current transition-all"
+        class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1.2 w-[1.3em] h-[1.3em] bg-current transition-all"
         :style="{
            mask: `url(${resolvedIcon}) no-repeat center / contain`,
            '-webkit-mask': `url(${resolvedIcon}) no-repeat center / contain`,

docs/.vitepress/transformer.ts

@@ -256,80 +256,80 @@ const transformLinks = (text: string): string =>
         name: 'Discord',
         find: /\[Discord\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="Discord" class="i-carbon:logo-discord" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'Discord\'" alt="Discord" class="i-carbon:logo-discord" /></a>'
       },
       {
         name: 'GitHub',
         find: /\[GitHub\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="GitHub" class="i-carbon:logo-github" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'GitHub\'" alt="GitHub" class="i-carbon:logo-github" /></a>'
       },
       {
         name: 'GitLab',
         find: /(?<=\/ )\[GitLab\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="GitLab" class="i-carbon:logo-gitlab" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'GitLab\'" alt="GitLab" class="i-carbon:logo-gitlab" /></a>'
       },
       {
         name: 'Source Code',
         find: /\[Source Code\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="Source Code" class="i-gravity-ui:code" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'Source Code\'" alt="Source Code" class="i-gravity-ui:code" /></a>'
       },
       {
         name: 'Telegram',
         find: /\[Telegram\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="Telegram" class="i-mdi:telegram" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'Telegram\'" alt="Telegram" class="i-mdi:telegram" /></a>'
       },
       {
         name: 'Subreddit',
         find: /\[Subreddit\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="Reddit" class="i-mdi:reddit" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'Reddit\'" alt="Reddit" class="i-mdi:reddit" /></a>'
       },
       {
         name: 'X',
         find: /\[X\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt="X" class="i-carbon:logo-x" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'X\'" alt="X" class="i-carbon:logo-x" /></a>'
       },
       {
         name: 'Tor',
         find: /\[.onion\]\(([^\)]*?)\)/gm,
         replace:
-          '<a target="_blank" href="$1"><div alt=".onion" class="i-simple-icons:torbrowser w-1em h-1em" /></a>'
+          '<a target="_blank" href="$1"><div v-tooltip="\'.onion\'" alt=".onion" class="i-simple-icons:torbrowser w-1em h-1em" /></a>'
       },
       // Platform indicators
       {
         name: 'Windows',
         find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Windows(?=,|[ \t]\/|$)/gm,
-        replace: ' <div alt="Windows" class="i-qlementine-icons:windows-24" /> '
+        replace: ' <div v-tooltip="\'Windows\'" alt="Windows" class="i-qlementine-icons:windows-24" /> '
       },
       {
         name: 'Mac',
         find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Mac(?=,|[ \t]\/|$)/gm,
-        replace: ' <div alt="Mac" class="i-qlementine-icons:mac-fill-16" /> '
+        replace: ' <div v-tooltip="\'Mac\'" alt="Mac" class="i-qlementine-icons:mac-fill-16" /> '
       },
       {
         name: 'Linux',
         find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Linux(?=,|[ \t]\/|$)/gm,
-        replace: ' <div alt="Linux" class="i-fluent-mdl2:linux-logo-32" /> '
+        replace: ' <div v-tooltip="\'Linux\'" alt="Linux" class="i-fluent-mdl2:linux-logo-32" /> '
       },
       {
         name: 'Android',
         find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Android(?=,|[ \t]\/|$)/gm,
-        replace: ' <div alt="Android" class="i-material-symbols:android" /> '
+        replace: ' <div v-tooltip="\'Android\'" alt="Android" class="i-material-symbols:android" /> '
       },
       {
         name: 'iOS',
         find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)iOS(?=,|[ \t]\/|$)/gm,
-        replace: ' <div alt="iOS" class="i-simple-icons:ios" /> '
+        replace: ' <div v-tooltip="\'iOS\'" alt="iOS" class="i-simple-icons:ios" /> '
       },
       {
         name: 'Web',
         find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Web(?=,|[ \t]\/|$)/gm,
-        replace: ' <div alt="Web" class="i-fluent:globe-32-filled" /> '
+        replace: ' <div v-tooltip="\'Web\'" alt="Web" class="i-fluent:globe-32-filled" /> '
       }
     ])
     .getText()

docs/public/note.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Majesticons by Gerrit Halfmann - https://github.com/halfmage/majesticons/blob/main/LICENSE --><path fill="currentColor" fill-rule="evenodd" d="M5 2a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h9v-5a3 3 0 0 1 3-3h5V5a3 3 0 0 0-3-3zm12.293 19.121a3 3 0 0 1-1.293.762V17a1 1 0 0 1 1-1h4.883a3 3 0 0 1-.762 1.293zM7 6a1 1 0 0 0 0 2h10a1 1 0 1 0 0-2zm0 4a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2zm0 4a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>