forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: add strategy to tooltip and use it in sticky elems (#1330)
authored by
Alex Savelyev
and committed by
GitHub
e45597ca
f345226f
+10
-3
+3
-2
app/components/Package/MetricsBadges.vue
+3
-2
app/components/Package/MetricsBadges.vue
···
57
57
<ul class="flex items-center gap-1.5 list-none m-0 p-0">
58
58
<!-- TypeScript types badge -->
59
59
<li v-if="!props.isBinary" class="contents">
60
-
<TooltipApp :text="typesTooltip">
60
+
<TooltipApp :text="typesTooltip" strategy="fixed">
61
61
<LinkBase
62
62
v-if="typesHref"
63
63
variant="button-secondary"
···
88
88
<li class="contents">
89
89
<TooltipApp
90
90
:text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
91
+
strategy="fixed"
91
92
>
92
93
<TagStatic
93
94
tabindex="0"
···
107
108
108
109
<!-- CJS badge -->
109
110
<li v-if="isLoading || hasCjs" class="contents">
110
-
<TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
111
+
<TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')" strategy="fixed">
111
112
<TagStatic
112
113
tabindex="0"
113
114
:variant="isLoading ? 'ghost' : 'default'"
+5
-1
app/components/Tooltip/Base.vue
+5
-1
app/components/Tooltip/Base.vue
···
1
1
<script setup lang="ts">
2
2
import type { HTMLAttributes } from 'vue'
3
-
import type { Placement } from '@floating-ui/vue'
3
+
import type { Placement, Strategy } from '@floating-ui/vue'
4
4
import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
5
5
6
6
const props = withDefaults(
···
17
17
tooltipAttr?: HTMLAttributes
18
18
/** Teleport target for the tooltip content (defaults to 'body') */
19
19
to?: string | HTMLElement
20
+
/** Strategy for the tooltip - prefer fixed for sticky containers (defaults to 'absolute') */
21
+
strategy?: Strategy
20
22
}>(),
21
23
{
22
24
to: 'body',
25
+
strategy: 'absolute',
23
26
},
24
27
)
25
28
···
31
34
const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
32
35
placement,
33
36
whileElementsMounted: autoUpdate,
37
+
strategy: props.strategy,
34
38
middleware: [offset(4), flip(), shift({ padding: 8 })],
35
39
})
36
40
</script>
+2
app/pages/package/[[org]]/[name].vue
+2
app/pages/package/[[org]]/[name].vue
···
623
623
: $t('package.verified_provenance')
624
624
"
625
625
position="bottom"
626
+
strategy="fixed"
626
627
>
627
628
<LinkBase
628
629
variant="button-secondary"
···
696
697
"
697
698
position="bottom"
698
699
class="items-center"
700
+
strategy="fixed"
699
701
>
700
702
<ButtonBase
701
703
@click="likeAction"