From d05eed95de8a0fc2b310c42bab8cdbd3e21c1fcf Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Tue, 10 Feb 2026 11:59:25 +0000
Subject: [PATCH] fix: add strategy to tooltip and use it in sticky elems

---
 app/components/Package/MetricsBadges.vue | 5 +++--
 app/components/Tooltip/Base.vue          | 6 +++++-
 app/pages/package/[[org]]/[name].vue     | 2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 356047315..f4dedca71 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -57,7 +57,7 @@ const typesHref = computed(() => {
   <ul class="flex items-center gap-1.5 list-none m-0 p-0">
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary" class="contents">
-      <TooltipApp :text="typesTooltip">
+      <TooltipApp :text="typesTooltip" strategy="fixed">
         <LinkBase
           v-if="typesHref"
           variant="button-secondary"
@@ -88,6 +88,7 @@ const typesHref = computed(() => {
     <li class="contents">
       <TooltipApp
         :text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
+        strategy="fixed"
       >
         <TagStatic
           tabindex="0"
@@ -107,7 +108,7 @@ const typesHref = computed(() => {
 
     <!-- CJS badge -->
     <li v-if="isLoading || hasCjs" class="contents">
-      <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
+      <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')" strategy="fixed">
         <TagStatic
           tabindex="0"
           :variant="isLoading ? 'ghost' : 'default'"
diff --git a/app/components/Tooltip/Base.vue b/app/components/Tooltip/Base.vue
index e4d8e3e31..9461018bc 100644
--- a/app/components/Tooltip/Base.vue
+++ b/app/components/Tooltip/Base.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import type { Placement } from '@floating-ui/vue'
+import type { Placement, Strategy } from '@floating-ui/vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 
 const props = withDefaults(
@@ -17,9 +17,12 @@ const props = withDefaults(
     tooltipAttr?: HTMLAttributes
     /** Teleport target for the tooltip content (defaults to 'body') */
     to?: string | HTMLElement
+    /** Strategy for the tooltip - prefer fixed for sticky containers (defaults to 'absolute') */
+    strategy?: Strategy
   }>(),
   {
     to: 'body',
+    strategy: 'absolute',
   },
 )
 
@@ -31,6 +34,7 @@ const placement = computed<Placement>(() => props.position || 'bottom')
 const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
   placement,
   whileElementsMounted: autoUpdate,
+  strategy: props.strategy,
   middleware: [offset(4), flip(), shift({ padding: 8 })],
 })
 </script>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 45a809621..a6ed47dfd 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -623,6 +623,7 @@ onKeyStroke(
                     : $t('package.verified_provenance')
                 "
                 position="bottom"
+                strategy="fixed"
               >
                 <LinkBase
                   variant="button-secondary"
@@ -696,6 +697,7 @@ onKeyStroke(
               "
               position="bottom"
               class="items-center"
+              strategy="fixed"
             >
               <ButtonBase
                 @click="likeAction"