diff --git a/frontend/src/lib/components/PropertyKeyInfo.test.tsx b/frontend/src/lib/components/PropertyKeyInfo.test.tsx
new file mode 100644
index 000000000000..30c6a10ef97f
--- /dev/null
+++ b/frontend/src/lib/components/PropertyKeyInfo.test.tsx
@@ -0,0 +1,45 @@
+import '@testing-library/jest-dom'
+
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+
+import { PropertyKeyInfo } from './PropertyKeyInfo'
+import { TaxonomicFilterGroupType } from './TaxonomicFilter/types'
+
+describe('PropertyKeyInfo', () => {
+ afterEach(() => {
+ cleanup()
+ jest.useRealTimers()
+ })
+
+ function renderSessionDuration(onWrapperClick = jest.fn()): { name: HTMLElement; overlayText: HTMLElement } {
+ render(
+
+ )
+ const name = screen.getByLabelText('Session duration')
+ fireEvent.mouseEnter(name)
+ return { name, overlayText: screen.getByText(/Learn more about how PostHog tracks sessions/) }
+ }
+
+ it('keeps the overlay open when the pointer moves from the name into it', () => {
+ jest.useFakeTimers()
+ const { name, overlayText } = renderSessionDuration()
+
+ fireEvent.mouseOut(name, { relatedTarget: overlayText })
+ act(() => {
+ jest.runOnlyPendingTimers()
+ })
+
+ expect(overlayText).toBeInTheDocument()
+ })
+
+ it('does not run the onClick of a wrapping element when the overlay is clicked', () => {
+ const onWrapperClick = jest.fn()
+ const { overlayText } = renderSessionDuration(onWrapperClick)
+
+ fireEvent.click(overlayText)
+
+ expect(onWrapperClick).not.toHaveBeenCalled()
+ })
+})
diff --git a/frontend/src/lib/components/PropertyKeyInfo.tsx b/frontend/src/lib/components/PropertyKeyInfo.tsx
index 381b842ecf0e..7bbd18b42cf0 100644
--- a/frontend/src/lib/components/PropertyKeyInfo.tsx
+++ b/frontend/src/lib/components/PropertyKeyInfo.tsx
@@ -115,6 +115,10 @@ const PropertyKeyInfoBase = React.forwardRef
}
visible={popoverVisible}
+ // React bubbles a click in the portaled overlay to the onClick of any element that wraps this component
+ onClickInside={(e) => e.stopPropagation()}
+ onMouseEnterInside={() => setPopoverVisible(true)}
+ onMouseLeaveInside={() => setPopoverVisible(false)}
showArrow
placement="right"
>
diff --git a/frontend/src/taxonomy/transformations.tsx b/frontend/src/taxonomy/transformations.tsx
index bdb74c34a328..971ae5e48b5b 100644
--- a/frontend/src/taxonomy/transformations.tsx
+++ b/frontend/src/taxonomy/transformations.tsx
@@ -33,7 +33,9 @@ function transformDescription(description: string): React.ReactNode {
const [_, text, url] = linkMatch
return (
- {text}
+
+ {text}
+
)
}