chore: replace all antd tooltips (#18638)

.eslintrc.js

@@ -86,6 +86,11 @@ module.exports = {
                         name: '@ant-design/icons',
                         message: 'Please use icons from the @posthog/icons package instead',
                     },
+                    {
+                        name: 'antd',
+                        importNames: ['Tooltip'],
+                        message: 'Please use Tooltip from @posthog/lemon-ui instead.',
+                    },
                 ],
             },
         ],

frontend/src/lib/components/PropertyKeyInfo.tsx

@@ -3,13 +3,12 @@ import clsx from 'clsx'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { getKeyMapping, PropertyKey, PropertyType } from 'lib/taxonomy'
 import React, { useState } from 'react'
-import { LemonDivider } from '@posthog/lemon-ui'
-import { TooltipPlacement } from 'antd/lib/tooltip'
+import { LemonDivider, TooltipProps } from '@posthog/lemon-ui'
 
 interface PropertyKeyInfoProps {
     value: PropertyKey
     type?: PropertyType
-    tooltipPlacement?: TooltipPlacement
+    tooltipPlacement?: TooltipProps['placement']
     disablePopover?: boolean
     disableIcon?: boolean
     /** @default true */

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

@@ -1,7 +1,6 @@
 import React, { FunctionComponent, ReactNode, useCallback, useMemo } from 'react'
 import { LemonButton, LemonButtonProps } from '../LemonButton'
 import { TooltipProps } from '../Tooltip'
-import { TooltipPlacement } from 'antd/lib/tooltip'
 import { LemonDivider } from '../LemonDivider'
 import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
 import { useKeyboardNavigation } from './useKeyboardNavigation'
@@ -152,7 +151,7 @@ export function LemonMenuOverlay({ items, tooltipPlacement, itemsRef }: LemonMen
 interface LemonMenuSectionListProps {
     sections: LemonMenuSection[]
     buttonSize: 'small' | 'medium'
-    tooltipPlacement: TooltipPlacement | undefined
+    tooltipPlacement: TooltipProps['placement'] | undefined
     itemsRef: React.RefObject<React.RefObject<HTMLButtonElement>[]> | undefined
 }
 
@@ -201,7 +200,7 @@ export function LemonMenuSectionList({
 interface LemonMenuItemListProps {
     items: LemonMenuItem[]
     buttonSize: 'small' | 'medium'
-    tooltipPlacement: TooltipPlacement | undefined
+    tooltipPlacement: TooltipProps['placement'] | undefined
     itemsRef: React.RefObject<React.RefObject<HTMLButtonElement>[]> | undefined
     itemIndexOffset?: number
 }
@@ -234,7 +233,7 @@ export function LemonMenuItemList({
 interface LemonMenuItemButtonProps {
     item: LemonMenuItem
     size: 'small' | 'medium'
-    tooltipPlacement: TooltipPlacement | undefined
+    tooltipPlacement: TooltipProps['placement'] | undefined
 }
 
 const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.RefAttributes<HTMLButtonElement>> =

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+// eslint-disable-next-line no-restricted-imports
 import { Tooltip as AntdTooltip } from 'antd'
 import { TooltipProps as AntdTooltipProps } from 'antd/lib/tooltip'
 import { useDebounce } from 'use-debounce'

frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx

@@ -1,4 +1,3 @@
-import { Tooltip } from 'antd'
 import clsx from 'clsx'
 import { BindLogic, useValues } from 'kea'
 import { getSeriesColor } from 'lib/colors'
@@ -10,6 +9,7 @@ import { RefCallback, useEffect, useState } from 'react'
 import useResizeObserver from 'use-resize-observer'
 import { isInteractionNode, isQueryNode, isSessionNode, TimeToSeeNode, TimeToSeeSessionNode } from '../types'
 import { sessionNodeFacts, SpanData, traceLogic } from './traceLogic'
+import { Tooltip } from '@posthog/lemon-ui'
 
 export interface TraceProps {
     timeToSeeSession: TimeToSeeSessionNode

frontend/src/scenes/experiments/Experiment.tsx

@@ -1,4 +1,4 @@
-import { Popconfirm, Progress, Tooltip } from 'antd'
+import { Popconfirm, Progress } from 'antd'
 import { BindLogic, useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { useEffect, useState } from 'react'
@@ -27,6 +27,7 @@ import {
     LemonTag,
     LemonTagType,
     LemonTextArea,
+    Tooltip,
 } from '@posthog/lemon-ui'
 import { NotFound } from 'lib/components/NotFound'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'

frontend/src/scenes/experiments/ExperimentPreview.tsx

@@ -1,4 +1,4 @@
-import { InputNumber, Slider, Tooltip } from 'antd'
+import { InputNumber, Slider } from 'antd'
 import { useValues, useActions } from 'kea'
 import { InsightLabel } from 'lib/components/InsightLabel'
 import { PropertyFilterButton } from 'lib/components/PropertyFilters/components/PropertyFilterButton'
@@ -13,7 +13,7 @@ import {
 import { experimentLogic } from './experimentLogic'
 import { ExperimentWorkflow } from './ExperimentWorkflow'
 import { humanFriendlyNumber } from 'lib/utils'
-import { LemonButton, LemonDivider, LemonModal } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonModal, Tooltip } from '@posthog/lemon-ui'
 import { Field, Form } from 'kea-forms'
 import { MetricSelector } from './MetricSelector'
 import { IconInfo } from 'lib/lemon-ui/icons'

frontend/src/scenes/experiments/ExperimentResult.tsx

@@ -1,4 +1,4 @@
-import { Col, Progress, Tooltip } from 'antd'
+import { Col, Progress } from 'antd'
 import { useValues } from 'kea'
 import { ChartDisplayType, FilterType, FunnelVizType, InsightShortId, InsightType } from '~/types'
 import './Experiment.scss'
@@ -12,6 +12,7 @@ import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersTo
 import { Query } from '~/queries/Query/Query'
 import { IconInfo } from '@posthog/icons'
 import { LoadingState } from './Experiment'
+import { Tooltip } from '@posthog/lemon-ui'
 
 export function ExperimentResult(): JSX.Element {
     const {

frontend/src/scenes/insights/filters/InsightDateFilter/InsightDateFilter.tsx

@@ -1,9 +1,9 @@
 import { useValues, useActions } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { insightLogic } from 'scenes/insights/insightLogic'
-import { Tooltip } from 'antd'
 import { IconCalendar, IconInfo } from '@posthog/icons'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { Tooltip } from '@posthog/lemon-ui'
 
 type InsightDateFilterProps = {
     disabled: boolean

frontend/src/scenes/paths/PathNodeCard.tsx

@@ -1,5 +1,5 @@
 import { useActions, useValues } from 'kea'
-import { Dropdown, Tooltip } from 'antd'
+import { Dropdown } from 'antd'
 
 import { InsightLogicProps } from '~/types'
 
@@ -8,6 +8,7 @@ import { PathNodeCardMenu } from './PathNodeCardMenu'
 import { PathNodeCardButton } from './PathNodeCardButton'
 import { PATH_NODE_CARD_LEFT_OFFSET, PATH_NODE_CARD_TOP_OFFSET, PATH_NODE_CARD_WIDTH } from './constants'
 import { pathsDataLogic } from './pathsDataLogic'
+import { Tooltip } from '@posthog/lemon-ui'
 
 export type PathNodeCardProps = {
     insightProps: InsightLogicProps

frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Tooltip, Radio, InputNumber } from 'antd'
+import { Radio, InputNumber } from 'antd'
 import { ChildFunctionProps, Form } from 'kea-forms'
 import { Field } from 'lib/forms/Field'
 import { useValues, useActions } from 'kea'
@@ -16,6 +16,7 @@ import { DatePicker } from 'lib/components/DatePicker'
 import { CodeEditor } from 'lib/components/CodeEditors'
 import { IconClose, IconPlayCircle, IconSettings } from 'lib/lemon-ui/icons'
 import { IconCheck } from '@posthog/icons'
+import { Tooltip } from '@posthog/lemon-ui'
 
 // keep in sync with plugin-server's export-historical-events.ts
 export const HISTORICAL_EXPORT_JOB_NAME = 'Export historical events'

frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx

@@ -1,9 +1,8 @@
-import { Tooltip } from 'antd'
 import { capitalizeFirstLetter, colonDelimitedDuration } from 'lib/utils'
 import { useActions, useValues } from 'kea'
 import { ONE_FRAME_MS, sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 import { seekbarLogic } from './seekbarLogic'
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, Tooltip } from '@posthog/lemon-ui'
 import { useKeyHeld } from 'lib/hooks/useKeyHeld'
 import { IconSkipBackward } from 'lib/lemon-ui/icons'
 import clsx from 'clsx'