feat(web-analytics): Add info icons on all web analytics sections

frontend/src/lib/lemon-ui/Link/Link.tsx

@@ -64,7 +64,9 @@ const isPostHogComDocs = (url: string): url is PostHogComDocsURL => {
     return /^https:\/\/(www\.)?posthog\.com\/docs/.test(url)
 }
 
-export type PostHogComDocsURL = `https://${'www.' | ''}posthog.com/docs/${string}`
+type PostHogComDocsURL = `https://${'www.' | ''}posthog.com/docs/${string}`
+type PostHogComTutorialsURL = `https://${'www.' | ''}posthog.com/tutorials/${string}`
+export type PostHogComResourcesURL = PostHogComDocsURL | PostHogComTutorialsURL
 
 /**
  * Link

frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx

@@ -32,6 +32,7 @@ export interface TooltipProps {
     placement?: Placement
     className?: string
     visible?: boolean
+    interactive?: boolean
 }
 
 export function Tooltip({
@@ -42,14 +43,16 @@ export function Tooltip({
     offset = 8,
     arrowOffset,
     delayMs = 500,
-    closeDelayMs = 0, // Set this to some delay to ensure the content stays open when hovered
+    closeDelayMs = 100, // Slight delay to ensure smooth transition
+    interactive = false,
     visible: controlledOpen,
 }: TooltipProps): JSX.Element {
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false)
+    const [isHoveringTooltip, setIsHoveringTooltip] = useState(false) // Track tooltip hover state
     const caretRef = useRef(null)
     const floatingContainer = useFloatingContainer()
 
-    const open = controlledOpen ?? uncontrolledOpen
+    const open = controlledOpen ?? (uncontrolledOpen || isHoveringTooltip)
 
     const { context, refs } = useFloating({
         placement,
@@ -116,7 +119,10 @@ export function Tooltip({
                         className="Tooltip max-w-sm"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{ ...context.floatingStyles }}
-                        {...getFloatingProps()}
+                        {...getFloatingProps({
+                            onMouseEnter: () => interactive && setIsHoveringTooltip(true), // Keep tooltip open
+                            onMouseLeave: () => interactive && setIsHoveringTooltip(false), // Allow closing
+                        })}
                     >
                         <div
                             className={clsx(

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -7,7 +7,7 @@ import { FEATURE_FLAGS } from 'lib/constants'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonSegmentedSelect } from 'lib/lemon-ui/LemonSegmentedSelect/LemonSegmentedSelect'
-import { PostHogComDocsURL } from 'lib/lemon-ui/Link/Link'
+import { PostHogComResourcesURL } from 'lib/lemon-ui/Link/Link'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isNotNil } from 'lib/utils'
@@ -129,8 +129,13 @@ const QueryTileItem = ({ tile }: { tile: QueryTile }): JSX.Element => {
                 layout.className
             )}
         >
-            {title && <h2 className="m-0 mb-3">{title}</h2>}
-            {docs && <LearnMorePopover docsURL={docs.docsUrl} title={docs.title} description={docs.description} />}
+            {title && (
+                <h2 className="flex-1 m-0 flex flex-row ml-1">
+                    {title}
+                    {docs && <LearnMorePopover url={docs.url} title={docs.title} description={docs.description} />}
+                </h2>
+            )}
+
             <WebQuery
                 query={query}
                 insightProps={insightProps}
@@ -205,7 +210,7 @@ export const WebTabs = ({
         query: QuerySchema
         docs:
             | {
-                  docsUrl: PostHogComDocsURL
+                  url?: PostHogComResourcesURL
                   title: string
                   description: string | JSX.Element
               }
@@ -247,11 +252,11 @@ export const WebTabs = ({
     return (
         <div className={clsx(className, 'flex flex-col')}>
             <div className="flex flex-row items-center self-stretch mb-3">
-                <h2 className="flex-1 m-0 flex flex-row">
+                <h2 className="flex-1 m-0 flex flex-row ml-1">
                     {activeTab?.title}
                     {activeTab?.docs && (
                         <LearnMorePopover
-                            docsURL={activeTab.docs.docsUrl}
+                            url={activeTab.docs.url}
                             title={activeTab.docs.title}
                             description={activeTab.docs.description}
                         />
@@ -275,12 +280,12 @@ export const WebTabs = ({
 }
 
 export interface LearnMorePopoverProps {
-    docsURL: PostHogComDocsURL
+    url?: PostHogComResourcesURL
     title: string
     description: string | JSX.Element
 }
 
-export const LearnMorePopover = ({ docsURL, title, description }: LearnMorePopoverProps): JSX.Element => {
+export const LearnMorePopover = ({ url, title, description }: LearnMorePopoverProps): JSX.Element => {
     const [isOpen, setIsOpen] = useState(false)
 
     return (
@@ -295,25 +300,27 @@ export const LearnMorePopover = ({ docsURL, title, description }: LearnMorePopov
                             targetBlank
                             type="tertiary"
                             onClick={() => setIsOpen(false)}
-                            size="xsmall"
+                            size="small"
                             icon={<IconX />}
                         />
                     </div>
                     <div className="text-sm text-gray-700">{description}</div>
-                    <div className="flex justify-end mt-4">
-                        <LemonButton
-                            to={docsURL}
-                            onClick={() => setIsOpen(false)}
-                            targetBlank={true}
-                            sideIcon={<IconOpenSidebar />}
-                        >
-                            Learn more
-                        </LemonButton>
-                    </div>
+                    {url && (
+                        <div className="flex justify-end mt-4">
+                            <LemonButton
+                                to={url}
+                                onClick={() => setIsOpen(false)}
+                                targetBlank={true}
+                                sideIcon={<IconOpenSidebar />}
+                            >
+                                Learn more
+                            </LemonButton>
+                        </div>
+                    )}
                 </div>
             }
         >
-            <LemonButton onClick={() => setIsOpen(!isOpen)} size="small" icon={<IconInfo />} />
+            <LemonButton onClick={() => setIsOpen(!isOpen)} size="small" icon={<IconInfo />} className="ml-1 mb-1" />
         </Popover>
     )
 }

frontend/src/scenes/web-analytics/tiles/WebAnalyticsTile.tsx

@@ -1,4 +1,5 @@
 import { IconGear } from '@posthog/icons'
+import { Link, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { IntervalFilterStandalone } from 'lib/components/IntervalFilter'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
@@ -463,7 +464,20 @@ export const WebStatsTableTile = ({
                         <LemonSwitch
                             label={
                                 <div className="flex flex-row space-x-2">
-                                    <span>Enable path cleaning</span>
+                                    <Tooltip
+                                        title={
+                                            <>
+                                                Check{' '}
+                                                <Link to="https://posthog.com/docs/product-analytics/paths#path-cleaning-rules">
+                                                    our path cleaning rules documentation
+                                                </Link>{' '}
+                                                to learn more about path cleaning
+                                            </>
+                                        }
+                                        interactive
+                                    >
+                                        <span>Enable path cleaning</span>
+                                    </Tooltip>
                                     <LemonButton
                                         icon={<IconGear />}
                                         type="tertiary"