Repository: PostHog/posthog
Pull request #31381: feat: add doc help links in lots of places
Author: login: raquelmsmith
Created: 2025-04-18T21:22:48Z | Merged: 2025-04-22T19:57:07Z

## Problem

One of the most common complaints we hear about PostHog is "it's so confusing to get started with" or "it's like I've been dropped into a cockpit and I'm just expected to know how to fly the plane."

PostHog is a serious tool with lots of advanced features. We don't try to hide these because we love our power users and want to help people become power users to get the most out of their data. So...

<!-- Who are we building for, what are their needs, why is this important? -->

<!-- Does this fix an issue? Uncomment the line below with the issue ID to automatically close it when merged -->
<!-- Closes #ISSUE_ID -->

## Changes

This PR adds a construct for including a doc link in any tooltip, and adds the structure to a few existing components (page tabs, buttons, etc) to make it easy to add doc links to any place on the site.

It also goes ahead and adds a few of these, probably ~30 links total but we have hundreds more we could add.

This also made it obvious to me that we have features without proper documentation, like playlists, so getting product engineers here to use these for their features might mean we end up with better docs for all our features.

https://github.com/user-attachments/assets/773189de-0144-40cf-bec8-09a267148b44

---
I hear you asking.... "this seems like UI cruft, do we need it? shouldn't the UI document itself?"

Which is a good question, and one that I asked myself before doing this. I think the short answer is: in a utopian world, yes. But in the real world, sometimes things need longer docs that don't fit into the UI. Which is why we employ a full-time docs team. To write docs. So we should make it easy for people to find those docs when they are right in the middle of trying to use those features.

<!-- If there are frontend changes, please include screenshots. -->
<!-- If a reference design was involved, include a link to the relevant Figma frame! -->

---

## Does this work well for both Cloud and self-hosted?

👍 

<!-- Yes / no / it doesn't have an impact. -->

## How did you test this code?

👀 

<!-- Briefly describe the steps you took. -->
<!-- Include automated tests if possible, otherwise describe the manual testing routine. -->



Diff:
diff --git a/frontend/__snapshots__/replay-listings--recordings-play-lists--dark.png b/frontend/__snapshots__/replay-listings--recordings-play-lists--dark.png
index 2f4d82b3d32..c9132c1fc19 100644
Binary files a/frontend/__snapshots__/replay-listings--recordings-play-lists--dark.png and b/frontend/__snapshots__/replay-listings--recordings-play-lists--dark.png differ
diff --git a/frontend/__snapshots__/replay-listings--recordings-play-lists--light.png b/frontend/__snapshots__/replay-listings--recordings-play-lists--light.png
index f5890c2b5dd..ce5c6cd271f 100644
Binary files a/frontend/__snapshots__/replay-listings--recordings-play-lists--light.png and b/frontend/__snapshots__/replay-listings--recordings-play-lists--light.png differ
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index e7c5c5a6c8c..c5369f35b57 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -51,6 +51,7 @@ export function Navbar(): JSX.Element {
                                                 item.onClick?.()
                                             }}
                                             active={activeNavbarItemId === item.identifier && isSidebarShown}
+                                            tooltipDocLink={item.tooltipDocLink}
                                         />
                                     )
                                 )}
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 89ab231df61..8b4cf2d4a76 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -21,109 +21,116 @@ export interface NavbarButtonProps extends Pick<LemonButtonProps, 'onClick' | 'i
     forceTooltipOnHover?: boolean
     tag?: 'alpha' | 'beta' | 'new'
     sideAction?: NavbarItem['sideAction']
+    tooltipDocLink?: string
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
->(({ identifier, shortTitle, title, forceTooltipOnHover, tag, onClick, sideAction, ...rest }, ref): JSX.Element => {
-    const { activeScene } = useValues(sceneLogic)
-    const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic)
-    const { hideNavOnMobile } = useActions(navigation3000Logic)
-    const { isNavCollapsed } = useValues(navigation3000Logic)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
+>(
+    (
+        { identifier, shortTitle, title, forceTooltipOnHover, tag, onClick, sideAction, tooltipDocLink, ...rest },
+        ref
+    ): JSX.Element => {
+        const { activeScene } = useValues(sceneLogic)
+        const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic)
+        const { hideNavOnMobile } = useActions(navigation3000Logic)
+        const { isNavCollapsed } = useValues(navigation3000Logic)
+        const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
-    const [hasBeenClicked, setHasBeenClicked] = useState(false)
+        const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-    const here = activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
-    const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
+        const here = activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
+        const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
-    const buttonProps: LemonButtonProps = rest
-    if (!isUsingNewNav) {
-        buttonProps.active = here
-    }
-    let content: JSX.Element | string | undefined
-    if (!isNavCollapsedActually) {
-        content = shortTitle || title
-        if (tag) {
-            content = (
-                <>
-                    <span className="grow">{content}</span>
-                    <LemonTag
-                        type={tag === 'alpha' ? 'completion' : tag === 'beta' ? 'warning' : 'success'}
-                        size="small"
-                        className="ml-2"
-                    >
-                        {tag.toUpperCase()}
-                    </LemonTag>
-                </>
-            )
+        const buttonProps: LemonButtonProps = rest
+        if (!isUsingNewNav) {
+            buttonProps.active = here
         }
-        if (sideAction) {
-            // @ts-expect-error - in this case we are perfectly okay with assigning a sideAction
-            buttonProps.sideAction = {
-                ...sideAction,
-                divider: true,
-                'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
+        let content: JSX.Element | string | undefined
+        if (!isNavCollapsedActually) {
+            content = shortTitle || title
+            if (tag) {
+                content = (
+                    <>
+                        <span className="grow">{content}</span>
+                        <LemonTag
+                            type={tag === 'alpha' ? 'completion' : tag === 'beta' ? 'warning' : 'success'}
+                            size="small"
+                            className="ml-2"
+                        >
+                            {tag.toUpperCase()}
+                        </LemonTag>
+                    </>
+                )
+            }
+            if (sideAction) {
+                // @ts-expect-error - in this case we are perfectly okay with assigning a sideAction
+                buttonProps.sideAction = {
+                    ...sideAction,
+                    divider: true,
+                    'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
+                }
+                buttonProps.sideIcon = null
             }
+        } else {
             buttonProps.sideIcon = null
         }
-    } else {
-        buttonProps.sideIcon = null
-    }
 
-    const buttonContent = (
-        <LemonButton
-            ref={ref}
-            data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-            onMouseEnter={() => setHasBeenClicked(false)}
-            onClick={(e) => {
-                if (buttonProps.to) {
-                    hideNavOnMobile()
-                }
-                setHasBeenClicked(true)
-                onClick?.(e)
-            }}
-            className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
-            fullWidth
-            type="secondary"
-            status="alt"
-            {...buttonProps}
-        >
-            {content}
-        </LemonButton>
-    )
+        const buttonContent = (
+            <LemonButton
+                ref={ref}
+                data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                onMouseEnter={() => setHasBeenClicked(false)}
+                onClick={(e) => {
+                    if (buttonProps.to) {
+                        hideNavOnMobile()
+                    }
+                    setHasBeenClicked(true)
+                    onClick?.(e)
+                }}
+                className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
+                fullWidth
+                type="secondary"
+                status="alt"
+                {...buttonProps}
+            >
+                {content}
+            </LemonButton>
+        )
 
-    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
+        const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
 
-    return (
-        <li className="w-full">
-            {notices.length ? (
-                <Tooltip
-                    title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
-                    placement={notices[0].placement ?? 'right'}
-                    delayMs={0}
-                    visible={true}
-                >
-                    {buttonContent}
-                </Tooltip>
-            ) : (
-                <Tooltip
-                    title={
-                        forceTooltipOnHover || isNavCollapsedActually
-                            ? here
-                                ? `${title} (you are here)`
-                                : title
-                            : null
-                    }
-                    placement="right"
-                    delayMs={0}
-                    visible={hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
-                >
-                    {buttonContent}
-                </Tooltip>
-            )}
-        </li>
-    )
-})
+        return (
+            <li className="w-full">
+                {notices.length ? (
+                    <Tooltip
+                        title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
+                        placement={notices[0].placement ?? 'right'}
+                        delayMs={0}
+                        visible={true}
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                ) : (
+                    <Tooltip
+                        title={
+                            forceTooltipOnHover || isNavCollapsedActually
+                                ? here
+                                    ? `${title} (you are here)`
+                                    : title
+                                : null
+                        }
+                        placement="right"
+                        delayMs={forceTooltipOnHover || isNavCollapsedActually ? 0 : undefined}
+                        visible={hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
+                        docLink={tooltipDocLink}
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                )}
+            </li>
+        )
+    }
+)
 NavbarButton.displayName = 'NavbarButton'
diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx
index cc4179bdaf6..7eae7d76472 100644
--- a/frontend/src/layout/navigation-3000/navigationLogic.tsx
+++ b/frontend/src/layout/navigation-3000/navigationLogic.tsx
@@ -393,6 +393,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                               identifier: Scene.Dashboards,
                               label: 'Dashboards',
                               icon: <IconDashboard />,
+                              tooltipDocLink: 'https://posthog.com/docs/product-analytics/dashboards',
                               logic: isUsingSidebar ? dashboardsSidebarLogic : undefined,
                               to: isUsingSidebar ? undefined : urls.dashboards(),
                               sideAction:
@@ -428,6 +429,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                               label: 'Notebooks',
                               icon: <IconNotebook />,
                               to: urls.notebooks(),
+                              tooltipDocLink: 'https://posthog.com/docs/notebooks',
                           },
                           {
                               identifier: Scene.DataManagement,
@@ -435,6 +437,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                               icon: <IconDatabase />,
                               logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
                               to: isUsingSidebar ? undefined : urls.eventDefinitions(),
+                              tooltipDocLink: 'https://posthog.com/docs/data',
                           },
                           {
                               identifier: Scene.PersonsManagement,
@@ -442,12 +445,14 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                               icon: <IconPeople />,
                               logic: isUsingSidebar ? personsAndGroupsSidebarLogic : undefined,
                               to: isUsingSidebar ? undefined : urls.persons(),
+                              tooltipDocLink: 'https://posthog.com/docs/data/persons',
                           },
                           {
                               identifier: Scene.Activity,
                               label: 'Activity',
                               icon: <IconLive />,
                               to: urls.activity(),
+                              tooltipDocLink: 'https://posthog.com/docs/data/events',
                           },
                       ]
                     : [
@@ -482,6 +487,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             label: 'Product analytics',
                             icon: <IconGraph />,
                             logic: isUsingSidebar ? insightsSidebarLogic : undefined,
+                            tooltipDocLink: 'https://posthog.com/docs/product-analytics/insights',
                             to: isUsingSidebar ? undefined : urls.savedInsights(),
                             sideAction:
                                 getAppContext()?.resource_access_control?.[AccessControlResourceType.Insight] ===
@@ -499,6 +505,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             label: 'Web analytics',
                             icon: <IconPieChart />,
                             to: isUsingSidebar ? undefined : urls.webAnalytics(),
+                            tooltipDocLink: 'https://posthog.com/docs/web-analytics/getting-started',
                         },
                         featureFlags[FEATURE_FLAGS.B2B_ANALYTICS]
                             ? {
@@ -507,6 +514,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                                   icon: <IconGroups />,
                                   to: urls.groups(0),
                                   tag: 'alpha' as const,
+                                  tooltipDocLink: 'https://posthog.com/docs/product-analytics/group-analytics',
                                   sideAction:
                                       groupTypes.size > 1 && !showGroupsIntroductionPage
                                           ? {
@@ -543,6 +551,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             label: 'Session replay',
                             icon: <IconRewindPlay />,
                             to: urls.replay(),
+                            tooltipDocLink: 'https://posthog.com/docs/session-replay',
                             sideAction: {
                                 identifier: 'replay-dropdown',
                                 dropdown: {
@@ -590,6 +599,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconToggle />,
                             logic: isUsingSidebar ? featureFlagsSidebarLogic : undefined,
                             to: isUsingSidebar ? undefined : urls.featureFlags(),
+                            tooltipDocLink: 'https://posthog.com/docs/feature-flags/creating-feature-flags',
                         },
                         {
                             identifier: Scene.Experiments,
@@ -597,18 +607,21 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconTestTube />,
                             logic: isUsingSidebar ? experimentsSidebarLogic : undefined,
                             to: isUsingSidebar ? undefined : urls.experiments(),
+                            tooltipDocLink: 'https://posthog.com/docs/experiments/creating-an-experiment',
                         },
                         {
                             identifier: Scene.Surveys,
                             label: 'Surveys',
                             icon: <IconMessage />,
                             to: urls.surveys(),
+                            tooltipDocLink: 'https://posthog.com/docs/surveys/creating-surveys',
                         },
                         {
                             identifier: Scene.EarlyAccessFeatures,
                             label: 'Early access features',
                             icon: <IconRocket />,
                             to: urls.earlyAccessFeatures(),
+                            tooltipDocLink: 'https://posthog.com/docs/feature-flags/early-access-feature-management',
                         },
                         featureFlags[FEATURE_FLAGS.LLM_OBSERVABILITY]
                             ? {
@@ -617,6 +630,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                                   icon: <IconAI />,
                                   to: urls.llmObservabilityDashboard(),
                                   tag: 'beta' as const,
+                                  tooltipDocLink: 'https://posthog.com/docs/ai-engineering/dashboard',
                               }
                             : null,
                         {
@@ -624,6 +638,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             label: 'Error tracking',
                             icon: <IconWarning />,
                             to: urls.errorTracking(),
+                            tooltipDocLink: 'https://posthog.com/docs/error-tracking/stack-traces',
                         },
                         {
                             identifier: Scene.SQLEditor,
@@ -631,6 +646,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconServer />,
                             to: urls.sqlEditor(),
                             logic: editorSceneLogic,
+                            tooltipDocLink: 'https://posthog.com/docs/data-warehouse/query#querying-sources-with-sql',
                         },
                         hasOnboardedAnyProduct
                             ? {
@@ -638,6 +654,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                                   label: 'Data pipelines',
                                   icon: <IconPlug />,
                                   to: urls.pipeline(),
+                                  tooltipDocLink: 'https://posthog.com/docs/cdp',
                               }
                             : null,
                         featureFlags[FEATURE_FLAGS.HEATMAPS_UI]
@@ -647,6 +664,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                                   icon: <IconCursorClick />,
                                   to: isUsingSidebar ? undefined : urls.heatmaps(),
                                   tag: 'alpha' as const,
+                                  tooltipDocLink: 'https://posthog.com/docs/toolbar/heatmaps',
                               }
                             : null,
                         featureFlags[FEATURE_FLAGS.MESSAGING] && hasOnboardedAnyProduct
diff --git a/frontend/src/layout/navigation-3000/types.ts b/frontend/src/layout/navigation-3000/types.ts
index 48280a50920..315c1ae0e59 100644
--- a/frontend/src/layout/navigation-3000/types.ts
+++ b/frontend/src/layout/navigation-3000/types.ts
@@ -31,6 +31,7 @@ interface NavbarItemBase {
     featureFlag?: (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
     tag?: 'alpha' | 'beta' | 'new'
     sideAction?: Omit<SideAction, 'divider' | 'data-attr' | 'tooltipPlacement'> & { identifier: string }
+    tooltipDocLink?: string
     /** @deprecated */
     onClick?: () => void
 }
diff --git a/frontend/src/layout/panel-layout/PanelLayoutNavBar.tsx b/frontend/src/layout/panel-layout/PanelLayoutNavBar.tsx
index fdf2e7001b5..1312d23759d 100644
--- a/frontend/src/layout/panel-layout/PanelLayoutNavBar.tsx
+++ b/frontend/src/layout/panel-layout/PanelLayoutNavBar.tsx
@@ -173,6 +173,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                 handleStaticNavbarItemClick(urls.dashboards(), true)
             },
             tooltip: 'Dashboards',
+            tooltipDocLink: 'https://posthog.com/docs/product-analytics/dashboards',
         },
         {
             identifier: 'Notebooks',
@@ -183,6 +184,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                 handleStaticNavbarItemClick(urls.notebooks(), true)
             },
             tooltip: 'Notebooks',
+            tooltipDocLink: 'https://posthog.com/docs/notebooks',
         },
         {
             identifier: 'DataManagement',
@@ -193,6 +195,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                 handleStaticNavbarItemClick(urls.eventDefinitions(), true)
             },
             tooltip: 'Data management',
+            tooltipDocLink: 'https://posthog.com/docs/data',
         },
         {
             identifier: 'PersonsManagement',
@@ -203,6 +206,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                 handleStaticNavbarItemClick(urls.persons(), true)
             },
             tooltip: featureFlags[FEATURE_FLAGS.B2B_ANALYTICS] ? 'Persons and cohorts' : 'Persons and groups',
+            tooltipDocLink: 'https://posthog.com/docs/data/persons',
         },
         {
             identifier: 'Activity',
@@ -213,6 +217,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                 handleStaticNavbarItemClick(urls.activity(), true)
             },
             tooltip: 'Activity',
+            tooltipDocLink: 'https://posthog.com/docs/data/events',
         },
     ]
 
@@ -287,6 +292,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                                                 iconOnly={isLayoutNavCollapsed}
                                                 tooltip={isLayoutNavCollapsed ? item.tooltip : undefined}
                                                 tooltipPlacement="right"
+                                                tooltipDocLink={item.tooltipDocLink}
                                             >
                                                 <span
                                                     className={`flex text-tertiary group-hover:text-primary ${
@@ -373,6 +379,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                                                                         isLayoutNavCollapsed ? item.label : undefined
                                                                     }
                                                                     tooltipPlacement="right"
+                                                                    tooltipDocLink={item.tooltipDocLink}
                                                                 >
                                                                     <span
                                                                         className={`flex text-tertiary group-hover:text-primary ${
@@ -534,6 +541,7 @@ export function PanelLayoutNavBar({ children }: { children: React.ReactNode }):
                                 tooltipPlacement="right"
                                 className="group"
                                 iconOnly={isLayoutNavCollapsed}
+                                tooltipDocLink="https://posthog.com/docs/toolbar"
                             >
                                 <span
                                     className={`flex text-tertiary group-hover:text-primary ${
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
index 7839349e444..6ac45ace6a4 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -45,6 +45,7 @@ interface PropertyFiltersProps {
     disabledReason?: string
     exactMatchFeatureFlagCohortOperators?: boolean
     hideBehavioralCohorts?: boolean
+    addFilterDocLink?: string
 }
 
 export function PropertyFilters({
@@ -75,6 +76,7 @@ export function PropertyFilters({
     disabledReason = undefined,
     exactMatchFeatureFlagCohortOperators = false,
     hideBehavioralCohorts,
+    addFilterDocLink,
 }: PropertyFiltersProps): JSX.Element {
     const logicProps = { propertyFilters, onChange, pageKey, sendAllKeyUpdates }
     const { filters, filtersWithNew } = useValues(propertyFilterLogic(logicProps))
@@ -141,6 +143,7 @@ export function PropertyFilters({
                                             allowRelativeDateOptions={allowRelativeDateOptions}
                                             exactMatchFeatureFlagCohortOperators={exactMatchFeatureFlagCohortOperators}
                                             hideBehavioralCohorts={hideBehavioralCohorts}
+                                            addFilterDocLink={addFilterDocLink}
                                         />
                                     )}
                                     errorMessage={errorMessages && errorMessages[index]}
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
index 3b6131c88f2..d550d4134fb 100644
--- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
@@ -57,6 +57,7 @@ export function TaxonomicPropertyFilter({
     allowRelativeDateOptions,
     exactMatchFeatureFlagCohortOperators,
     hideBehavioralCohorts,
+    addFilterDocLink,
 }: PropertyFilterInternalProps): JSX.Element {
     const pageKey = useMemo(() => pageKeyInput || `filter-${uniqueMemoizedIndex++}`, [pageKeyInput])
     const groupTypes = taxonomicGroupTypes || [
@@ -219,6 +220,7 @@ export function TaxonomicPropertyFilter({
                                 data-attr={'property-select-toggle-' + index}
                                 sideIcon={null} // The null sideIcon is here on purpose - it prevents the dropdown caret
                                 onClick={() => (dropdownOpen ? closeDropdown() : openDropdown())}
+                                tooltipDocLink={addFilterDocLink}
                             >
                                 {filter?.type === 'cohort' ? (
                                     filter.cohort_name || `Cohort #${filter?.value}`
diff --git a/frontend/src/lib/components/PropertyFilters/types.ts b/frontend/src/lib/components/PropertyFilters/types.ts
index 746e31db19d..0f55eb3ae32 100644
--- a/frontend/src/lib/components/PropertyFilters/types.ts
+++ b/frontend/src/lib/components/PropertyFilters/types.ts
@@ -55,4 +55,5 @@ export interface PropertyFilterInternalProps {
     allowRelativeDateOptions?: boolean
     exactMatchFeatureFlagCohortOperators?: boolean
     hideBehavioralCohorts?: boolean
+    addFilterDocLink?: string
 }
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
index 0b9d23f7f33..9c1917ffb69 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
@@ -55,6 +55,8 @@ export interface LemonButtonPropsBase
     loading?: boolean
     /** Tooltip to display on hover. */
     tooltip?: TooltipProps['title']
+    /** Documentation link to show in the tooltip. */
+    tooltipDocLink?: string
     tooltipPlacement?: TooltipProps['placement']
     /** Whether the row should take up the parent's full width. */
     fullWidth?: boolean
@@ -139,6 +141,7 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
                 onClick,
                 truncate = false,
                 buttonWrapper,
+                tooltipDocLink,
                 ...buttonProps
             },
             ref
@@ -245,9 +248,9 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
                 workingButton = buttonWrapper(workingButton)
             }
 
-            if (tooltipContent) {
+            if (tooltipContent || tooltipDocLink) {
                 workingButton = (
-                    <Tooltip title={tooltipContent} placement={tooltipPlacement}>
+                    <Tooltip title={tooltipContent} placement={tooltipPlacement} docLink={tooltipDocLink}>
                         {workingButton}
                     </Tooltip>
                 )
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
index e689bc5abcc..40178fafd1d 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
@@ -14,6 +14,7 @@ export interface AbstractLemonTab<T extends string | number> {
     tooltip?: string | JSX.Element
     /** URL of the tab if it can be linked to (which is usually a good practice). */
     link?: string
+    tooltipDocLink?: string
 }
 
 /** A tab with content. In this case the LemonTabs component automatically renders content of the active tab. */
@@ -76,7 +77,13 @@ export function LemonTabs<T extends string | number>({
                         </>
                     )
                     return (
-                        <Tooltip key={tab.key} title={tab.tooltip} placement="top" offset={0}>
+                        <Tooltip
+                            key={tab.key}
+                            title={tab.tooltip}
+                            placement="top"
+                            offset={0}
+                            docLink={tab.tooltipDocLink}
+                        >
                             <li
                                 className={clsx('LemonTabs__tab', tab.key === activeKey && 'LemonTabs__tab--active')}
                                 onClick={onChange ? () => onChange(tab.key) : undefined}
diff --git a/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx b/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
index ac29ffee093..223184b49e4 100644
--- a/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
+++ b/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
@@ -22,8 +22,15 @@ import clsx from 'clsx'
 import { useFloatingContainer } from 'lib/hooks/useFloatingContainerContext'
 import React, { useRef, useState } from 'react'
 
-export interface TooltipProps {
-    title: string | React.ReactNode | (() => string)
+import { Link } from '../Link'
+
+type TooltipTitle = string | React.ReactNode | (() => string)
+
+export interface TooltipProps extends BaseTooltipProps {
+    title?: TooltipTitle
+}
+
+interface BaseTooltipProps {
     delayMs?: number
     closeDelayMs?: number
     offset?: number
@@ -31,9 +38,19 @@ export interface TooltipProps {
     placement?: Placement
     className?: string
     visible?: boolean
+    /**
+     * Defaults to true if docLink is provided
+     */
     interactive?: boolean
+    docLink?: string
 }
 
+export type RequiredTooltipProps = (
+    | { title: TooltipTitle; docLink?: string }
+    | { title?: TooltipTitle; docLink: string }
+) &
+    BaseTooltipProps
+
 export function Tooltip({
     children,
     title,
@@ -45,7 +62,8 @@ export function Tooltip({
     closeDelayMs = 100, // Slight delay to ensure smooth transition
     interactive = false,
     visible: controlledOpen,
-}: React.PropsWithChildren<TooltipProps>): JSX.Element {
+    docLink,
+}: React.PropsWithChildren<RequiredTooltipProps>): JSX.Element {
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
     const [isHoveringTooltip, setIsHoveringTooltip] = useState(false) // Track tooltip hover state
     const caretRef = useRef(null)
@@ -108,10 +126,12 @@ export function Tooltip({
         })
     )
 
-    if (!title) {
+    if (!title && !docLink) {
         return <>{child}</>
     }
 
+    const isInteractive = interactive || !!docLink
+
     return (
         <>
             {clonedChild}
@@ -123,8 +143,8 @@ export function Tooltip({
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{ ...context.floatingStyles }}
                         {...getFloatingProps({
-                            onMouseEnter: () => interactive && setIsHoveringTooltip(true), // Keep tooltip open
-                            onMouseLeave: () => interactive && setIsHoveringTooltip(false), // Allow closing
+                            onMouseEnter: () => isInteractive && setIsHoveringTooltip(true), // Keep tooltip open
+                            onMouseLeave: () => isInteractive && setIsHoveringTooltip(false), // Allow closing
                         })}
                     >
                         <div
@@ -136,6 +156,13 @@ export function Tooltip({
                             style={{ ...transitionStyles }}
                         >
                             {typeof title === 'function' ? title() : title}
+                            {docLink && (
+                                <p className={`mb-0 ${title ? 'mt-1' : ''}`}>
+                                    <Link to={docLink} target="_blank" className="text-xs">
+                                        Read the docs
+                                    </Link>
+                                </p>
+                            )}
                             <FloatingArrow
                                 ref={caretRef}
                                 context={context}
diff --git a/frontend/src/lib/ui/Button/ButtonPrimitives.tsx b/frontend/src/lib/ui/Button/ButtonPrimitives.tsx
index 551537b5b4b..7f41f3c3bce 100644
--- a/frontend/src/lib/ui/Button/ButtonPrimitives.tsx
+++ b/frontend/src/lib/ui/Button/ButtonPrimitives.tsx
@@ -38,6 +38,7 @@ type ButtonBaseProps = {
     disabled?: boolean
     active?: boolean
     tooltip?: TooltipProps['title']
+    tooltipDocLink?: TooltipProps['docLink']
     tooltipPlacement?: TooltipProps['placement']
     buttonWrapper?: (button: JSX.Element) => JSX.Element
 } & VariantProps<typeof buttonVariants>
@@ -280,6 +281,7 @@ export const ButtonPrimitive = forwardRef<HTMLButtonElement | HTMLAnchorElement,
         sideActionRight,
         tooltip,
         tooltipPlacement,
+        tooltipDocLink,
         ...rest
     } = props
     // If inside a ButtonGroup, use the context values, otherwise use props
@@ -330,9 +332,9 @@ export const ButtonPrimitive = forwardRef<HTMLButtonElement | HTMLAnchorElement,
         children
     )
 
-    if (tooltip) {
+    if (tooltip || tooltipDocLink) {
         buttonComponent = (
-            <Tooltip title={tooltip} placement={tooltipPlacement}>
+            <Tooltip title={tooltip} placement={tooltipPlacement} docLink={tooltipDocLink}>
                 {buttonComponent}
             </Tooltip>
         )
diff --git a/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx b/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx
index 68071939954..3c957e589a5 100644
--- a/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx
+++ b/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx
@@ -92,6 +92,7 @@ export function TrendsSeries(): JSX.Element | null {
                     TaxonomicFilterGroupType.DataWarehouse,
                 ]}
                 hideDeleteBtn={series?.length === 1}
+                addFilterDocLink="https://posthog.com/docs/product-analytics/trends/filters"
             />
         </>
     )
diff --git a/frontend/src/scenes/actions/ActionEdit.tsx b/frontend/src/scenes/actions/ActionEdit.tsx
index c5592f721f1..f86722d5f9b 100644
--- a/frontend/src/scenes/actions/ActionEdit.tsx
+++ b/frontend/src/scenes/actions/ActionEdit.tsx
@@ -163,7 +163,7 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
                     <h2 className="subtitle">Match groups</h2>
                     <p>
                         Your action will be triggered whenever <b>any of your match groups</b> are received.
-                        <Link to="https://posthog.com/docs/product-analytics/retention" target="_blank">
+                        <Link to="https://posthog.com/docs/data/actions" target="_blank">
                             <IconInfo className="ml-1 text-secondary text-xl" />
                         </Link>
                     </p>
diff --git a/frontend/src/scenes/data-management/DataManagementScene.tsx b/frontend/src/scenes/data-management/DataManagementScene.tsx
index 7d7ded50ba1..b07266490a7 100644
--- a/frontend/src/scenes/data-management/DataManagementScene.tsx
+++ b/frontend/src/scenes/data-management/DataManagementScene.tsx
@@ -43,12 +43,14 @@ const tabs: Record<
         content: JSX.Element
         buttons?: React.ReactNode
         flag?: FeatureFlagKey
+        tooltipDocLink?: string
     }
 > = {
     [DataManagementTab.EventDefinitions]: {
         url: urls.eventDefinitions(),
         label: 'Events',
         content: <EventDefinitionsTable />,
+        tooltipDocLink: 'https://posthog.com/docs/data/events',
     },
     [DataManagementTab.Actions]: {
         url: urls.actions(),
@@ -65,6 +67,7 @@ const tabs: Record<
         ),
         buttons: <NewActionButton />,
         content: <ActionsTable />,
+        tooltipDocLink: 'https://posthog.com/docs/data/actions',
     },
     [DataManagementTab.PropertyDefinitions]: {
         url: urls.propertyDefinitions(),
@@ -80,12 +83,14 @@ const tabs: Record<
             </TitleWithIcon>
         ),
         content: <PropertyDefinitionsTable />,
+        tooltipDocLink: 'https://posthog.com/docs/new-to-posthog/understand-posthog#properties',
     },
     [DataManagementTab.Annotations]: {
         url: urls.annotations(),
         content: <Annotations />,
         label: 'Annotations',
         buttons: <NewAnnotationButton />,
+        tooltipDocLink: 'https://posthog.com/docs/data/annotations',
     },
     [DataManagementTab.History]: {
         url: urls.dataManagementHistory(),
@@ -96,6 +101,7 @@ const tabs: Record<
                 caption="Only actions taken in the UI are captured in History. Automatic creation of definitions by ingestion is not shown here."
             />
         ),
+        tooltipDocLink: 'https://posthog.com/docs/data#history',
     },
     [DataManagementTab.Revenue]: {
         url: urls.revenueSettings(),
@@ -115,6 +121,7 @@ const tabs: Record<
         label: 'Ingestion warnings',
         content: <IngestionWarningsView />,
         flag: FEATURE_FLAGS.INGESTION_WARNINGS_ENABLED,
+        tooltipDocLink: 'https://posthog.com/docs/data/ingestion-warnings',
     },
 }
 
@@ -197,6 +204,7 @@ export function DataManagementScene(): JSX.Element {
         key: key as DataManagementTab,
         label: <span data-attr={`data-management-${key}-tab`}>{tabs[key].label}</span>,
         content: tabs[key].content,
+        tooltipDocLink: tabs[key].tooltipDocLink,
     }))
 
     return (
diff --git a/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx b/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx
index bbdef0a5fc8..b2c51fae22d 100644
--- a/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx
+++ b/frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
@@ -45,10 +46,12 @@ export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Elem
             <div className="flex justify-between items-center">
                 <LemonLabel>Query Steps</LemonLabel>
 
-                <div className="flex items-center gap-2">
-                    <span className="text-secondary">Graph type</span>
-                    <FunnelVizType insightProps={insightProps} />
-                </div>
+                <Tooltip docLink="https://posthog.com/docs/product-analytics/funnels#graph-type">
+                    <div className="flex items-center gap-2">
+                        <span className="text-secondary">Graph type</span>
+                        <FunnelVizType insightProps={insightProps} />
+                    </div>
+                </Tooltip>
             </div>
             <ActionFilter
                 bordered
@@ -73,6 +76,7 @@ export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Elem
                     TaxonomicFilterGroupType.SessionProperties,
                     TaxonomicFilterGroupType.HogQLExpression,
                 ]}
+                addFilterDocLink="https://posthog.com/docs/product-analytics/trends/filters"
             />
             <div className="mt-4 deprecated-space-y-4">
                 {showGroupsOptions && (
diff --git a/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx b/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx
index 0de0966bda2..6aad8e6d6a6 100644
--- a/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx
+++ b/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx
@@ -32,6 +32,7 @@ export function InsightsNav(): JSX.Element {
                                     INSIGHT_TYPES_METADATA[type].tooltipDescription ||
                                     INSIGHT_TYPES_METADATA[type].description
                                 }
+                                docLink={INSIGHT_TYPES_METADATA[type].tooltipDocLink}
                             >
                                 <span>{label}</span>
                             </Tooltip>
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.tsx
index d01be78392d..81500c58171 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.tsx
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.tsx
@@ -92,6 +92,8 @@ export interface ActionFilterProps {
     dataWarehousePopoverFields?: DataWarehousePopoverField[]
     /** Whether to add left padding to the filters div to align with indented content */
     filtersLeftPadding?: boolean
+    /** Doc link to show in the tooltip of the New Filter button */
+    addFilterDocLink?: string
 }
 
 export const ActionFilter = React.forwardRef<HTMLDivElement, ActionFilterProps>(function ActionFilter(
@@ -125,6 +127,7 @@ export const ActionFilter = React.forwardRef<HTMLDivElement, ActionFilterProps>(
         allowedMathTypes,
         dataWarehousePopoverFields,
         filtersLeftPadding,
+        addFilterDocLink,
     },
     ref
 ): JSX.Element {
@@ -187,6 +190,7 @@ export const ActionFilter = React.forwardRef<HTMLDivElement, ActionFilterProps>(
         allowedMathTypes,
         dataWarehousePopoverFields,
         filtersLeftPadding,
+        addFilterDocLink,
     }
 
     const reachedLimit: boolean = Boolean(entitiesLimit && localFilters.length >= entitiesLimit)
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
index c4746a234d7..fd30cbcec54 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
@@ -133,6 +133,8 @@ export interface ActionFilterRowProps {
     dataWarehousePopoverFields?: DataWarehousePopoverField[]
     /** Whether to add left padding to the filters div to align with suffix content */
     filtersLeftPadding?: boolean
+    /** Doc link to show in the tooltip of the New Filter button */
+    addFilterDocLink?: string
 }
 
 export function ActionFilterRow({
@@ -165,6 +167,7 @@ export function ActionFilterRow({
     allowedMathTypes,
     dataWarehousePopoverFields = defaultDataWarehousePopoverFields,
     filtersLeftPadding = false,
+    addFilterDocLink,
 }: ActionFilterRowProps): JSX.Element {
     const { entityFilterVisible } = useValues(logic)
     const {
@@ -324,6 +327,7 @@ export function ActionFilterRow({
                         : undefined
                 }}
                 disabledReason={filter.id === 'empty' ? 'Please select an event first' : undefined}
+                tooltipDocLink={addFilterDocLink}
             />
         </IconWithCount>
     )
@@ -646,6 +650,7 @@ export function ActionFilterRow({
                                 ? Object.values(dataWarehouseTablesMap[filter.name]?.fields ?? [])
                                 : []
                         }
+                        addFilterDocLink={addFilterDocLink}
                     />
                 </div>
             )}
diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx
index ca8881cd11f..dfab1ea80df 100644
--- a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx
+++ b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx
@@ -30,6 +30,11 @@ export function TaxonomicBreakdownButton({
                 sideIcon={null}
                 disabledReason={disabledReason}
                 size={size}
+                tooltipDocLink={
+                    taxonomicBreakdownType === TaxonomicFilterGroupType.CohortsWithAllUsers
+                        ? 'https://posthog.com/docs/product-analytics/trends/breakdowns#cohorts-and-breakdowns'
+                        : 'https://posthog.com/docs/product-analytics/trends/breakdowns'
+                }
             >
                 {taxonomicBreakdownType === TaxonomicFilterGroupType.CohortsWithAllUsers
                     ? 'Add cohort'
diff --git a/frontend/src/scenes/persons-management/PersonsManagementScene.tsx b/frontend/src/scenes/persons-management/PersonsManagementScene.tsx
index c0dd036e809..a880cca8744 100644
--- a/frontend/src/scenes/persons-management/PersonsManagementScene.tsx
+++ b/frontend/src/scenes/persons-management/PersonsManagementScene.tsx
@@ -19,6 +19,7 @@ export function PersonsManagementScene(): JSX.Element {
         key: tab.key,
         label: <span data-attr={`persons-management-${tab.key}-tab`}>{tab.label}</span>,
         content: tab.content,
+        tooltipDocLink: tab.tooltipDocLink,
     }))
 
     return (
diff --git a/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx b/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx
index 67be0e53b7e..3e451ba02ed 100644
--- a/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx
+++ b/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx
@@ -24,6 +24,7 @@ export type PersonsManagementTab = {
     label: string | JSX.Element
     content: any
     buttons?: any
+    tooltipDocLink?: string
 }
 
 export type PersonsManagementTabs = Record<
@@ -61,8 +62,9 @@ export const personsManagementSceneLogic = kea<personsManagementSceneLogicType>(
                     {
                         key: 'persons',
                         url: urls.persons(),
-                        label: 'Persons',
+                        label: 'People',
                         content: <Persons />,
+                        tooltipDocLink: 'https://posthog.com/docs/data/persons',
                     },
                     {
                         key: 'cohorts',
@@ -78,6 +80,7 @@ export const personsManagementSceneLogic = kea<personsManagementSceneLogicType>(
                                 New cohort
                             </LemonButton>
                         ),
+                        tooltipDocLink: 'https://posthog.com/docs/data/cohorts',
                     },
                     ...(featureFlags[FEATURE_FLAGS.B2B_ANALYTICS]
                         ? [
diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
index c397bb66f6a..33ffa22d3a7 100644
--- a/frontend/src/scenes/saved-insights/SavedInsights.tsx
+++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -83,6 +83,7 @@ export interface InsightTypeMetadata {
     tooltipDescription?: string
     icon: (props?: any) => JSX.Element | null
     inMenu: boolean
+    tooltipDocLink?: string
 }
 
 export const QUERY_TYPES_METADATA: Record<NodeKind, InsightTypeMetadata> = {
@@ -91,30 +92,35 @@ export const QUERY_TYPES_METADATA: Record<NodeKind, InsightTypeMetadata> = {
         description: 'Visualize and break down how actions or events vary over time.',
         icon: IconTrends,
         inMenu: true,
+        tooltipDocLink: 'https://posthog.com/docs/product-analytics/trends/overview',
     },
     [NodeKind.FunnelsQuery]: {
         name: 'Funnel',
         description: 'Discover how many users complete or drop out of a sequence of actions.',
         icon: IconFunnels,
         inMenu: true,
+        tooltipDocLink: 'https://posthog.com/docs/product-analytics/funnels',
     },
     [NodeKind.RetentionQuery]: {
         name: 'Retention',
         description: 'See how many users return on subsequent days after an initial action.',
         icon: IconRetention,
         inMenu: true,
+        tooltipDocLink: 'https://posthog.com/docs/product-analytics/retention',
     },
     [NodeKind.PathsQuery]: {
         name: 'Paths',
         description: 'Trace the journeys users take within your product and where they drop off.',
         icon: IconUserPaths,
         inMenu: true,
+        tooltipDocLink: 'https://posthog.com/docs/product-analytics/paths',
     },
     [NodeKind.StickinessQuery]: {
         name: 'Stickiness',
         description: 'See what keeps users coming back by viewing the interval between repeated actions.',
         icon: IconStickiness,
         inMenu: true,
+        tooltipDocLink: 'https://posthog.com/docs/product-analytics/stickiness',
     },
     [NodeKind.LifecycleQuery]: {
         name: 'Lifecycle',
@@ -123,6 +129,7 @@ export const QUERY_TYPES_METADATA: Record<NodeKind, InsightTypeMetadata> = {
             "Understand growth by breaking down new, resurrected, returning and dormant users. Doesn't include anonymous events and users/groups appear as new when they are first identified.",
         icon: IconLifecycle,
         inMenu: true,
+        tooltipDocLink: 'https://posthog.com/docs/product-analytics/lifecycle',
     },
     [NodeKind.FunnelCorrelationQuery]: {
         name: 'Funnel Correlation',
diff --git a/frontend/src/scenes/session-recordings/SessionRecordings.tsx b/frontend/src/scenes/session-recordings/SessionRecordings.tsx
index bc210666ad7..64092b751fe 100644
--- a/frontend/src/scenes/session-recordings/SessionRecordings.tsx
+++ b/frontend/src/scenes/session-recordings/SessionRecordings.tsx
@@ -25,13 +25,13 @@ import { sessionRecordingsPlaylistLogic } from 'scenes/session-recordings/playli
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
-import { NotebookNodeType, ReplayTabs } from '~/types'
+import { NotebookNodeType, ReplayTab, ReplayTabs } from '~/types'
 import { ProductKey } from '~/types'
 
 import { createPlaylist } from './playlist/playlistUtils'
 import { SessionRecordingsPlaylist } from './playlist/SessionRecordingsPlaylist'
 import { SavedSessionRecordingPlaylists } from './saved-playlists/SavedSessionRecordingPlaylists'
-import { humanFriendlyTabName, sessionReplaySceneLogic } from './sessionReplaySceneLogic'
+import { sessionReplaySceneLogic } from './sessionReplaySceneLogic'
 import SessionRecordingTemplates from './templates/SessionRecordingTemplates'
 
 function Header(): JSX.Element {
@@ -215,6 +215,28 @@ function MainPanel(): JSX.Element {
     )
 }
 
+const ReplayPageTabs: ReplayTab[] = [
+    {
+        label: 'Recordings',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/tutorials',
+        key: ReplayTabs.Home,
+    },
+    {
+        label: 'Playlists',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/how-to-watch-recordings',
+        key: ReplayTabs.Playlists,
+        tooltip: 'View & create playlists',
+    },
+    {
+        label: 'Templates',
+        key: ReplayTabs.Templates,
+    },
+    {
+        label: 'Settings',
+        key: ReplayTabs.Settings,
+    },
+]
+
 function PageTabs(): JSX.Element {
     const { tab, shouldShowNewBadge } = useValues(sessionReplaySceneLogic)
 
@@ -222,17 +244,19 @@ function PageTabs(): JSX.Element {
         <LemonTabs
             activeKey={tab}
             onChange={(t) => router.actions.push(urls.replay(t as ReplayTabs))}
-            tabs={Object.values(ReplayTabs).map((replayTab) => {
+            tabs={ReplayPageTabs.map((replayTab) => {
                 return {
                     label: (
                         <>
-                            {humanFriendlyTabName(replayTab)}
-                            {replayTab === ReplayTabs.Templates && shouldShowNewBadge && (
+                            {replayTab.label}
+                            {replayTab.label === ReplayTabs.Templates && shouldShowNewBadge && (
                                 <LemonBadge className="ml-1" size="small" />
                             )}
                         </>
                     ),
-                    key: replayTab,
+                    key: replayTab.key,
+                    tooltip: replayTab.tooltip,
+                    tooltipDocLink: replayTab.tooltipDocLink,
                 }
             })}
         />
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 79f555e0aa7..bf4ccc90d42 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -758,6 +758,13 @@ export enum ReplayTabs {
     Settings = 'settings',
 }
 
+export type ReplayTab = {
+    label: string
+    key: ReplayTabs
+    tooltip?: string
+    tooltipDocLink?: string
+}
+
 export enum ExperimentsTabs {
     All = 'all',
     Yours = 'yours',


Reviews:
user: login: greptile-apps[bot]
body: 
## PR Summary

Added documentation links to tooltips across the PostHog UI to improve user onboarding and feature discoverability.

Key changes:
- Added new `tooltipDocLink` prop to core components like `LemonButton`, `Tooltip`, and `NavbarButton` to support documentation links
- Implemented automatic `interactive=true` behavior in `Tooltip` when doc links are present
- Added ~30 documentation links to key features like dashboards, insights, data management, and session recordings
- Modified tooltip content handling to properly display both tooltips and doc links while maintaining accessibility
- Ensured backward compatibility by making `tooltipDocLink` optional across all implementations

<sub>24 file(s) reviewed, 7 comment(s)</sub>
<sub>[Edit PR Review Bot Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews&utm_content=posthog_31381)</sub>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-18T21:27:54Z
user: login: rafaeelaudibert
body: I, particularly, would not include these in the sidebar, it's *very* noisy, but if I'm the only one with this opinion... go for it :)

For all the other changes, nice +1+1 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-22T19:49:34Z
user: login: raquelmsmith
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T19:51:26Z
user: login: raquelmsmith
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T19:51:28Z
user: login: rodrigoi
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T20:05:17Z

Review comments:
diff_hunk: @@ -21,109 +21,116 @@ export interface NavbarButtonProps extends Pick<LemonButtonProps, 'onClick' | 'i
     forceTooltipOnHover?: boolean
     tag?: 'alpha' | 'beta' | 'new'
     sideAction?: NavbarItem['sideAction']
+    tooltipDocLink?: string
 }
 
 export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardRef<
     HTMLButtonElement,
     NavbarButtonProps
->(({ identifier, shortTitle, title, forceTooltipOnHover, tag, onClick, sideAction, ...rest }, ref): JSX.Element => {
-    const { activeScene } = useValues(sceneLogic)
-    const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic)
-    const { hideNavOnMobile } = useActions(navigation3000Logic)
-    const { isNavCollapsed } = useValues(navigation3000Logic)
-    const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
+>(
+    (
+        { identifier, shortTitle, title, forceTooltipOnHover, tag, onClick, sideAction, tooltipDocLink, ...rest },
+        ref
+    ): JSX.Element => {
+        const { activeScene } = useValues(sceneLogic)
+        const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic)
+        const { hideNavOnMobile } = useActions(navigation3000Logic)
+        const { isNavCollapsed } = useValues(navigation3000Logic)
+        const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
-    const [hasBeenClicked, setHasBeenClicked] = useState(false)
+        const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-    const here = activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
-    const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
+        const here = activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
+        const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
-    const buttonProps: LemonButtonProps = rest
-    if (!isUsingNewNav) {
-        buttonProps.active = here
-    }
-    let content: JSX.Element | string | undefined
-    if (!isNavCollapsedActually) {
-        content = shortTitle || title
-        if (tag) {
-            content = (
-                <>
-                    <span className="grow">{content}</span>
-                    <LemonTag
-                        type={tag === 'alpha' ? 'completion' : tag === 'beta' ? 'warning' : 'success'}
-                        size="small"
-                        className="ml-2"
-                    >
-                        {tag.toUpperCase()}
-                    </LemonTag>
-                </>
-            )
+        const buttonProps: LemonButtonProps = rest
+        if (!isUsingNewNav) {
+            buttonProps.active = here
         }
-        if (sideAction) {
-            // @ts-expect-error - in this case we are perfectly okay with assigning a sideAction
-            buttonProps.sideAction = {
-                ...sideAction,
-                divider: true,
-                'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
+        let content: JSX.Element | string | undefined
+        if (!isNavCollapsedActually) {
+            content = shortTitle || title
+            if (tag) {
+                content = (
+                    <>
+                        <span className="grow">{content}</span>
+                        <LemonTag
+                            type={tag === 'alpha' ? 'completion' : tag === 'beta' ? 'warning' : 'success'}
+                            size="small"
+                            className="ml-2"
+                        >
+                            {tag.toUpperCase()}
+                        </LemonTag>
+                    </>
+                )
+            }
+            if (sideAction) {
+                // @ts-expect-error - in this case we are perfectly okay with assigning a sideAction
+                buttonProps.sideAction = {
+                    ...sideAction,
+                    divider: true,
+                    'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
+                }
+                buttonProps.sideIcon = null
             }
+        } else {
             buttonProps.sideIcon = null
         }
-    } else {
-        buttonProps.sideIcon = null
-    }
 
-    const buttonContent = (
-        <LemonButton
-            ref={ref}
-            data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-            onMouseEnter={() => setHasBeenClicked(false)}
-            onClick={(e) => {
-                if (buttonProps.to) {
-                    hideNavOnMobile()
-                }
-                setHasBeenClicked(true)
-                onClick?.(e)
-            }}
-            className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
-            fullWidth
-            type="secondary"
-            status="alt"
-            {...buttonProps}
-        >
-            {content}
-        </LemonButton>
-    )
+        const buttonContent = (
+            <LemonButton
+                ref={ref}
+                data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                onMouseEnter={() => setHasBeenClicked(false)}
+                onClick={(e) => {
+                    if (buttonProps.to) {
+                        hideNavOnMobile()
+                    }
+                    setHasBeenClicked(true)
+                    onClick?.(e)
+                }}
+                className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
+                fullWidth
+                type="secondary"
+                status="alt"
+                {...buttonProps}
+            >
+                {content}
+            </LemonButton>
+        )
 
-    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
+        const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
 
-    return (
-        <li className="w-full">
-            {notices.length ? (
-                <Tooltip
-                    title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
-                    placement={notices[0].placement ?? 'right'}
-                    delayMs={0}
-                    visible={true}
-                >
-                    {buttonContent}
-                </Tooltip>
-            ) : (
-                <Tooltip
-                    title={
-                        forceTooltipOnHover || isNavCollapsedActually
-                            ? here
-                                ? `${title} (you are here)`
-                                : title
-                            : null
-                    }
-                    placement="right"
-                    delayMs={0}
-                    visible={hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
-                >
-                    {buttonContent}
-                </Tooltip>
-            )}
-        </li>
-    )
-})
+        return (
+            <li className="w-full">
+                {notices.length ? (
+                    <Tooltip
+                        title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
+                        placement={notices[0].placement ?? 'right'}
+                        delayMs={0}
+                        visible={true}
+                    >
+                        {buttonContent}
+                    </Tooltip>
+                ) : (
+                    <Tooltip
+                        title={
+                            forceTooltipOnHover || isNavCollapsedActually
+                                ? here
+                                    ? `${title} (you are here)`
+                                    : title
path: frontend/src/layout/navigation-3000/components/NavbarButton.tsx
user: login: greptile-apps[bot]
body: logic: Concatenating " (you are here)" to title could fail if title is a ReactElement. Need to handle this case.

```suggestion
                                ? here
                                    ? typeof title === 'string' ? `${title} (you are here)` : <>{title} <span>(you are here)</span></>
                                    : title
```
created_at: 2025-04-18T21:23:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -108,10 +112,14 @@ export function Tooltip({
         })
     )
 
-    if (!title) {
+    if (!title && !docLink) {
         return <>{child}</>
     }
path: frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
user: login: greptile-apps[bot]
body: logic: The empty state check now includes docLink, but the function still returns the original child instead of the cloned child with refs. This could break event handling.

```suggestion
    if (!title && !docLink) {
        return clonedChild
    }
```
created_at: 2025-04-18T21:25:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -108,10 +112,14 @@ export function Tooltip({
         })
     )
 
-    if (!title) {
+    if (!title && !docLink) {
         return <>{child}</>
     }
 
+    if (docLink) {
+        interactive = true
+    }
path: frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
user: login: greptile-apps[bot]
body: logic: Setting interactive=true directly mutates a prop. Should use a derived value instead.

```suggestion
    const isInteractive = interactive || !!docLink
```
created_at: 2025-04-18T21:25:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,10 +46,12 @@ export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Elem
             <div className="flex justify-between items-center">
                 <LemonLabel>Query Steps</LemonLabel>
 
-                <div className="flex items-center gap-2">
-                    <span className="text-secondary">Graph type</span>
-                    <FunnelVizType insightProps={insightProps} />
-                </div>
+                <Tooltip title="" docLink="https://posthog.com/docs/product-analytics/funnels#graph-type">
path: frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx
user: login: greptile-apps[bot]
body: logic: Empty title prop on Tooltip component. Should include a brief description even when providing a docLink.
created_at: 2025-04-18T21:25:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -73,6 +76,7 @@ export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Elem
                     TaxonomicFilterGroupType.SessionProperties,
                     TaxonomicFilterGroupType.HogQLExpression,
                 ]}
+                addFilterDocLink="https://posthog.com/docs/product-analytics/trends/filters"
path: frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx
user: login: greptile-apps[bot]
body: logic: The doc link points to trends/filters when this is a funnel component. Should likely point to funnels documentation instead.

```suggestion
                addFilterDocLink="https://posthog.com/docs/product-analytics/funnels"
```
created_at: 2025-04-18T21:25:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -215,24 +215,48 @@ function MainPanel(): JSX.Element {
     )
 }
 
+const ReplayPageTabs: ReplayTab[] = [
+    {
+        label: 'Recordings',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/tutorials',
+        key: ReplayTabs.Home,
+    },
+    {
+        label: 'Playlists',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/how-to-watch-recordings',
+        key: ReplayTabs.Playlists,
+        tooltip: 'View & create playlists',
+    },
+    {
+        label: 'Templates',
+        key: ReplayTabs.Templates,
+    },
+    {
+        label: 'Settings',
+        key: ReplayTabs.Settings,
+    },
+]
path: frontend/src/scenes/session-recordings/SessionRecordings.tsx
user: login: greptile-apps[bot]
body: style: Consider adding tooltips and doc links for 'Templates' and 'Settings' tabs for consistency, since they're missing while other tabs have them
created_at: 2025-04-18T21:27:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -215,24 +215,48 @@ function MainPanel(): JSX.Element {
     )
 }
 
+const ReplayPageTabs: ReplayTab[] = [
+    {
+        label: 'Recordings',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/tutorials',
+        key: ReplayTabs.Home,
+    },
+    {
+        label: 'Playlists',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/how-to-watch-recordings',
+        key: ReplayTabs.Playlists,
+        tooltip: 'View & create playlists',
+    },
+    {
+        label: 'Templates',
+        key: ReplayTabs.Templates,
+    },
+    {
+        label: 'Settings',
+        key: ReplayTabs.Settings,
+    },
+]
+
 function PageTabs(): JSX.Element {
     const { tab, shouldShowNewBadge } = useValues(sessionReplaySceneLogic)
 
     return (
         <LemonTabs
             activeKey={tab}
             onChange={(t) => router.actions.push(urls.replay(t as ReplayTabs))}
-            tabs={Object.values(ReplayTabs).map((replayTab) => {
+            tabs={ReplayPageTabs.map((replayTab) => {
                 return {
                     label: (
                         <>
-                            {humanFriendlyTabName(replayTab)}
-                            {replayTab === ReplayTabs.Templates && shouldShowNewBadge && (
+                            {replayTab.label}
+                            {replayTab.label === 'Templates' && shouldShowNewBadge && (
path: frontend/src/scenes/session-recordings/SessionRecordings.tsx
user: login: greptile-apps[bot]
body: logic: Using string literal 'Templates' is fragile - should reference replayTab.label === ReplayTabs.Templates for consistency with the enum usage

```suggestion
                            {replayTab.label === ReplayTabs.Templates && shouldShowNewBadge && (
```
created_at: 2025-04-18T21:27:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -543,6 +551,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             label: 'Session replay',
path: frontend/src/layout/navigation-3000/navigationLogic.tsx
user: login: rafaeelaudibert
body: Could've added `https://posthog.com/docs/web-analytics/revenue-tracking` for `Revenue Analytics`, I can add as a follow-up
created_at: 2025-04-22T19:44:45Z
author_association: MEMBER
diff_hunk: @@ -136,6 +156,13 @@ export function Tooltip({
                             style={{ ...transitionStyles }}
                         >
                             {typeof title === 'function' ? title() : title}
+                            {docLink && (
+                                <p className={`mb-0 ${title ? 'mt-1' : ''}`}>
+                                    <Link to={docLink} target="_blank" className="text-xs">
+                                        Read the docs
+                                    </Link>
+                                </p>
+                            )}
path: frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
user: login: rafaeelaudibert
body: If `title` was provided, we should probably just render as the small `docs` icon to the right rather than rendering **under** it + "Read the docs" label.
created_at: 2025-04-22T19:46:17Z
author_association: MEMBER
diff_hunk: @@ -215,24 +215,48 @@ function MainPanel(): JSX.Element {
     )
 }
 
+const ReplayPageTabs: ReplayTab[] = [
+    {
+        label: 'Recordings',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/tutorials',
+        key: ReplayTabs.Home,
+    },
+    {
+        label: 'Playlists',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/how-to-watch-recordings',
+        key: ReplayTabs.Playlists,
+        tooltip: 'View & create playlists',
+    },
+    {
+        label: 'Templates',
path: frontend/src/scenes/session-recordings/SessionRecordings.tsx
user: login: rafaeelaudibert
body: This changed names, it used to be "Figure out what to watch". The old name sounded better tbh - it was clearer on what this is about, at least
created_at: 2025-04-22T19:48:44Z
author_association: MEMBER
diff_hunk: @@ -215,24 +215,48 @@ function MainPanel(): JSX.Element {
     )
 }
 
+const ReplayPageTabs: ReplayTab[] = [
+    {
+        label: 'Recordings',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/tutorials',
+        key: ReplayTabs.Home,
+    },
+    {
+        label: 'Playlists',
+        tooltipDocLink: 'https://posthog.com/docs/session-replay/how-to-watch-recordings',
+        key: ReplayTabs.Playlists,
+        tooltip: 'View & create playlists',
+    },
+    {
+        label: 'Templates',
path: frontend/src/scenes/session-recordings/SessionRecordings.tsx
user: login: raquelmsmith
body: Good catch!
created_at: 2025-04-22T19:51:26Z
author_association: MEMBER
diff_hunk: @@ -136,6 +156,13 @@ export function Tooltip({
                             style={{ ...transitionStyles }}
                         >
                             {typeof title === 'function' ? title() : title}
+                            {docLink && (
+                                <p className={`mb-0 ${title ? 'mt-1' : ''}`}>
+                                    <Link to={docLink} target="_blank" className="text-xs">
+                                        Read the docs
+                                    </Link>
+                                </p>
+                            )}
path: frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
user: login: raquelmsmith
body: I like that it's more explicit for now
created_at: 2025-04-22T19:51:28Z
author_association: MEMBER
diff_hunk: @@ -30,6 +30,11 @@ export function TaxonomicBreakdownButton({
                 sideIcon={null}
                 disabledReason={disabledReason}
                 size={size}
+                tooltipDocLink={
+                    taxonomicBreakdownType === TaxonomicFilterGroupType.CohortsWithAllUsers
+                        ? 'https://posthog.com/docs/product-analytics/trends/breakdowns#cohorts-and-breakdowns'
+                        : 'https://posthog.com/docs/product-analytics/trends/breakdowns'
+                }
path: frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx
user: login: rodrigoi
body: we could shorten this a little with a template literal.

```suggestion
                tooltipDocLink={`https://posthog.com/docs/product-analytics/trends/breakdowns${
                taxonomicBreakdownType === TaxonomicFilterGroupType.CohortsWithAllUsers
                        ? '#cohorts-and-breakdowns' : ''
                }`}
```
created_at: 2025-04-22T20:05:17Z
author_association: MEMBER

PR comments:
user: login: posthog-bot
created_at: 2025-04-18T21:32:54Z
body: ## 📸 UI snapshots have been updated

**2** snapshot changes in total. **0** added, **2** modified, **0** deleted:

- **`chromium`**: **0** added, **2** modified, **0** deleted ([diff for shard 5](https://github.com/PostHog/posthog/pull/31381/commits/c30519e63f39d7c670428304e2c6e1ab713f89cf))
- `webkit`: **0** added, **0** modified, **0** deleted

Triggered by [this commit](https://github.com/PostHog/posthog/pull/31381/commits/bd5b322bab1140f3739cb077fe2debcf24ef513c).

👉 **[Review this PR's diff of snapshots.](https://github.com/PostHog/posthog/pull/31381/files#:~:text=frontend/__snapshots__/)**
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-21T19:57:23Z
body: **Size Change:** +2.46 kB (+0.02%) 

**Total Size:** 13.7 MB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `frontend/dist/toolbar.js` | 13.7 MB | +2.46 kB (+0.02%) |

<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>
author_association: CONTRIBUTOR
user: login: k11kirky
created_at: 2025-04-22T19:53:47Z
body: I agree with @rafaeelaudibert - Love this in most places except the left nav. We already have docs in the side nav for each product, so the extra hover state adds more ui complexity imo
author_association: CONTRIBUTOR
user: login: raquelmsmith
created_at: 2025-04-22T20:06:07Z
body: Danmit automerge

Every time I use automerge I regret it

Follow-up PR incoming
author_association: MEMBER
user: login: raquelmsmith
created_at: 2025-04-22T20:21:44Z
body: > We already have docs in the side nav for each product, so the extra hover state adds more ui complexity imo

Where do users find this? I think they have to know that the docs are in the left nav, then decide to click there, whereas this is more "in your face".

We could delay the interaction a bit more so they have to hover on it for longer.

In collapsed-nav mode we show a tooltip anyway. 

I think I will leave it there for now and see if anyone clicks on it, and if not then remove.
author_association: MEMBER