diff --git a/packages/core/src/client/webcomponents/components/FloatingPopover.ts b/packages/core/src/client/webcomponents/components/FloatingPopover.ts index c3285801..202f4707 100644 --- a/packages/core/src/client/webcomponents/components/FloatingPopover.ts +++ b/packages/core/src/client/webcomponents/components/FloatingPopover.ts @@ -53,6 +53,7 @@ const FloatingPopoverComponent = defineComponent({ ) let previousContent: VNode | undefined + let previousStyle: Record = {} return () => { // Force re-render to update the position @@ -62,6 +63,23 @@ const FloatingPopoverComponent = defineComponent({ if (!el.value) return null + // When dismissing (item is null), keep the last known position + // so the popover fades out in place instead of jumping + if (!props.item) { + return h( + 'div', + { + ref: 'panel', + class: [ + 'fixed z-floating-tooltip text-xs transition-all duration-300 w-max bg-glass color-base border border-base rounded px2 p1', + 'op0 pointer-events-none', + ], + style: previousStyle, + }, + previousContent, + ) + } + const rect = el.value.getBoundingClientRect() // guess alignment of the tooltip based on viewport position @@ -116,6 +134,8 @@ const FloatingPopoverComponent = defineComponent({ } } + previousStyle = style + const content = ( typeof props.item?.content === 'string' ? h('span', props.item?.content)