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(() => {
-
-
+
{
-
{
-
-
+
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(() => props.position || 'bottom')
const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
placement,
whileElementsMounted: autoUpdate,
+ strategy: props.strategy,
middleware: [offset(4), flip(), shift({ padding: 8 })],
})
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"
>