From 840e4169eddd572fb7c2169867117516cc5ff33b Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 9 Feb 2026 09:33:53 +0000
Subject: [PATCH 1/3] feat: support -to- customization in tooltip

---
 app/components/Tooltip/App.vue  |  3 +++
 app/components/Tooltip/Base.vue | 33 ++++++++++++++++++++-------------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/components/Tooltip/App.vue b/app/components/Tooltip/App.vue
index cf92551a5..0c926baaa 100644
--- a/app/components/Tooltip/App.vue
+++ b/app/components/Tooltip/App.vue
@@ -6,6 +6,8 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
   /** Enable interactive tooltip (pointer events + hide delay for clickable content) */
   interactive?: boolean
+  /** Teleport target for the tooltip content (defaults to 'body') */
+  to?: string | HTMLElement
 }>()
 
 const isVisible = shallowRef(false)
@@ -48,6 +50,7 @@ const tooltipAttrs = computed(() => {
     :position
     :interactive
     :tooltip-attr="tooltipAttrs"
+    :to="props.to"
     @mouseenter="show"
     @mouseleave="hide"
     @focusin="show"
diff --git a/app/components/Tooltip/Base.vue b/app/components/Tooltip/Base.vue
index 71157f4a2..e4d8e3e31 100644
--- a/app/components/Tooltip/Base.vue
+++ b/app/components/Tooltip/Base.vue
@@ -3,18 +3,25 @@ import type { HTMLAttributes } from 'vue'
 import type { Placement } from '@floating-ui/vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 
-const props = defineProps<{
-  /** Tooltip text (optional when using content slot) */
-  text?: string
-  /** Position: 'top' | 'bottom' | 'left' | 'right' */
-  position?: 'top' | 'bottom' | 'left' | 'right'
-  /** is tooltip visible */
-  isVisible: boolean
-  /** Allow pointer events on tooltip (for interactive content like links) */
-  interactive?: boolean
-  /** attributes for tooltip element */
-  tooltipAttr?: HTMLAttributes
-}>()
+const props = withDefaults(
+  defineProps<{
+    /** Tooltip text (optional when using content slot) */
+    text?: string
+    /** Position: 'top' | 'bottom' | 'left' | 'right' */
+    position?: 'top' | 'bottom' | 'left' | 'right'
+    /** is tooltip visible */
+    isVisible: boolean
+    /** Allow pointer events on tooltip (for interactive content like links) */
+    interactive?: boolean
+    /** attributes for tooltip element */
+    tooltipAttr?: HTMLAttributes
+    /** Teleport target for the tooltip content (defaults to 'body') */
+    to?: string | HTMLElement
+  }>(),
+  {
+    to: 'body',
+  },
+)
 
 const triggerRef = useTemplateRef('triggerRef')
 const tooltipRef = useTemplateRef('tooltipRef')
@@ -32,7 +39,7 @@ const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
   <div ref="triggerRef" class="inline-flex">
     <slot />
 
-    <Teleport to="body">
+    <Teleport :to="props.to">
       <Transition
         enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
         leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"

From 417ac12dfe02e51122c7c51f949de6bedbe9a607 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 9 Feb 2026 09:52:48 +0000
Subject: [PATCH 2/3] fix: use tooltip in important info-notes instead of title

---
 app/components/Package/Dependencies.vue   |  8 ++++----
 app/components/Package/InstallScripts.vue |  8 ++++----
 app/components/Package/SkillsModal.vue    | 12 ++++++++----
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 3d102e17f..7946ff485 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -95,15 +95,15 @@ const numberFormatter = useNumberFormatter()
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
-            <span
+            <TooltipApp
               v-if="outdatedDeps[dep]"
-              class="shrink-0"
+              class="shrink-0 p-2 -m-2"
               :class="getVersionClass(outdatedDeps[dep])"
-              :title="getOutdatedTooltip(outdatedDeps[dep], $t)"
               aria-hidden="true"
+              :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
-            </span>
+            </TooltipApp>
             <LinkBase
               v-if="getVulnerableDepInfo(dep)"
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index db93f4624..b7747042d 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -115,18 +115,18 @@ const isExpanded = shallowRef(false)
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1">
-            <span
+            <TooltipApp
               v-if="
                 outdatedNpxDeps[dep] &&
                 outdatedNpxDeps[dep].resolved !== outdatedNpxDeps[dep].latest
               "
-              class="shrink-0"
+              class="shrink-0 p-2 -m-2"
               :class="getVersionClass(outdatedNpxDeps[dep])"
-              :title="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
               aria-hidden="true"
+              :text="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
-            </span>
+            </TooltipApp>
             <span
               class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedNpxDeps[dep])"
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 8261e378b..83708beff 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -164,11 +164,15 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             aria-hidden="true"
           />
           <span class="font-mono text-sm text-fg-muted">{{ skill.name }}</span>
-          <span
+          <TooltipApp
             v-if="skill.warnings?.length"
-            class="i-carbon:warning w-3.5 h-3.5 text-amber-500 shrink-0"
-            :title="getWarningTooltip(skill)"
-          />
+            class="shrink-0 p-2 -m-2"
+            aria-hidden="true"
+            :text="getWarningTooltip(skill)"
+            to="#skills-modal"
+          >
+            <span class="i-carbon:warning w-3.5 h-3.5 text-amber-500" />
+          </TooltipApp>
         </button>
 
         <!-- Expandable details -->

From 5c4d1fc9f8c33c847b72f40753458d21026489f2 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Mon, 9 Feb 2026 11:00:18 +0000
Subject: [PATCH 3/3] test: add tests for -to- prop in tooltip-base

---
 test/nuxt/components/Tooltip.spec.ts | 54 ++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 test/nuxt/components/Tooltip.spec.ts

diff --git a/test/nuxt/components/Tooltip.spec.ts b/test/nuxt/components/Tooltip.spec.ts
new file mode 100644
index 000000000..51c5a737c
--- /dev/null
+++ b/test/nuxt/components/Tooltip.spec.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import TooltipBase from '~/components/Tooltip/Base.vue'
+
+describe('TooltipBase to prop', () => {
+  it('teleports to body by default', async () => {
+    await mountSuspended(TooltipBase, {
+      props: {
+        text: 'Tooltip text',
+        isVisible: true,
+        tooltipAttr: { 'aria-label': 'tooltip' },
+      },
+      slots: {
+        default: '<button>Trigger</button>',
+      },
+    })
+
+    const tooltip = document.querySelector<HTMLElement>('[aria-label="tooltip"]')
+    expect(tooltip).not.toBeNull()
+    expect(tooltip?.textContent).toContain('Tooltip text')
+
+    const currentContainer = tooltip?.parentElement?.parentElement
+    expect(currentContainer).toBe(document.body)
+  })
+
+  it('teleports into provided container when using selector string', async () => {
+    const container = document.createElement('div')
+    container.id = 'tooltip-container'
+    document.body.appendChild(container)
+
+    try {
+      await mountSuspended(TooltipBase, {
+        props: {
+          text: 'Tooltip text',
+          isVisible: true,
+          to: '#tooltip-container',
+          tooltipAttr: { 'aria-label': 'tooltip' },
+        },
+        slots: {
+          default: '<button>Trigger</button>',
+        },
+      })
+
+      const tooltip = container.querySelector<HTMLElement>('[aria-label="tooltip"]')
+      expect(tooltip).not.toBeNull()
+      expect(tooltip?.textContent).toContain('Tooltip text')
+
+      const currentContainer = tooltip?.parentElement?.parentElement
+      expect(currentContainer).toBe(container)
+    } finally {
+      container.remove()
+    }
+  })
+})