fix: add strategy to tooltip and use it in sticky elems (#1330)

Author: alexdln

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'"

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>

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"