Revert "Show tooltip immediately if a tooltip is already open (#28870)" (#28935)

This reverts commit 74950ea7e705acb8f42dea552b23ce93c66058c7.

GitOrigin-RevId: 346a947c420448becf294f0174937a5c256bf945

services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx

@@ -74,6 +74,7 @@ export default function DictionaryModalContent({
                 <OLTooltip
                   id={`tooltip-remove-learned-word-${learnedWord}`}
                   description={t('edit_dictionary_remove')}
+                  overlayProps={{ delay: 0 }}
                 >
                   <OLIconButton
                     variant="danger"

services/web/frontend/js/features/ide-react/context/react-context-root.tsx

@@ -30,7 +30,6 @@ import { UserFeaturesProvider } from '@/shared/context/user-features-context'
 import { UserSettingsProvider } from '@/shared/context/user-settings-context'
 import { IdeRedesignSwitcherProvider } from './ide-redesign-switcher-context'
 import { CommandRegistryProvider } from './command-registry-context'
-import { TooltipProvider } from '@/shared/context/tooltip-provider'
 
 export const ReactContextRoot: FC<
   React.PropsWithChildren<{
@@ -69,7 +68,6 @@ export const ReactContextRoot: FC<
     IdeRedesignSwitcherProvider,
     CommandRegistryProvider,
     UserFeaturesProvider,
-    TooltipProvider,
     ...providers,
   }
 
@@ -105,9 +103,7 @@ export const ReactContextRoot: FC<
                                                             <Providers.OutlineProvider>
                                                               <Providers.IdeRedesignSwitcherProvider>
                                                                 <Providers.CommandRegistryProvider>
-                                                                  <Providers.TooltipProvider>
-                                                                    {children}
-                                                                  </Providers.TooltipProvider>
+                                                                  {children}
                                                                 </Providers.CommandRegistryProvider>
                                                               </Providers.IdeRedesignSwitcherProvider>
                                                             </Providers.OutlineProvider>

services/web/frontend/js/features/ide-redesign/components/online-users/online-users-widget.tsx

@@ -78,6 +78,7 @@ const OnlineUserWidget = ({
       overlayProps={{
         placement: 'bottom',
         trigger: ['hover', 'focus'],
+        delay: 0,
       }}
     >
       <button className="online-users-row-button" onClick={onClick}>

services/web/frontend/js/features/ide-redesign/components/rail/rail-action-element.tsx

@@ -43,7 +43,7 @@ export default function RailActionElement({ action }: { action: RailAction }) {
         <OLTooltip
           id={`rail-dropdown-tooltip-${action.key}`}
           description={action.title}
-          overlayProps={{ placement: 'right' }}
+          overlayProps={{ delay: 0, placement: 'right' }}
         >
           <span>
             <DropdownToggle
@@ -68,7 +68,7 @@ export default function RailActionElement({ action }: { action: RailAction }) {
       <OLTooltip
         id={`rail-tab-tooltip-${action.key}`}
         description={action.title}
-        overlayProps={{ placement: 'right' }}
+        overlayProps={{ delay: 0, placement: 'right' }}
       >
         <button
           onClick={onActionClick}

services/web/frontend/js/features/ide-redesign/components/rail/rail-tab.tsx

@@ -21,7 +21,7 @@ const RailTab = forwardRef<
     <OLTooltip
       id={`rail-tab-tooltip-${eventKey}`}
       description={title}
-      overlayProps={{ placement: 'right' }}
+      overlayProps={{ delay: 0, placement: 'right' }}
     >
       <NavLink
         ref={ref}

services/web/frontend/js/features/ide-redesign/components/toolbar/change-layout-button.tsx

@@ -23,7 +23,7 @@ export default function ChangeLayoutButton() {
         <OLTooltip
           id="tooltip-open-layout-options"
           description={t('layout_options')}
-          overlayProps={{ placement: 'bottom' }}
+          overlayProps={{ delay: 0, placement: 'bottom' }}
         >
           <span>
             <DropdownToggle

services/web/frontend/js/features/ide-redesign/components/toolbar/logos.tsx

@@ -15,7 +15,7 @@ export const ToolbarLogos = ({ cobranding }: ToolbarLogosProps) => {
       <OLTooltip
         id="tooltip-home-button"
         description={t('back_to_your_projects')}
-        overlayProps={{ placement: 'bottom' }}
+        overlayProps={{ delay: 0, placement: 'bottom' }}
       >
         <div className="ide-redesign-toolbar-home-button">
           <a href="/project" className="ide-redesign-toolbar-home-link">

services/web/frontend/js/features/ide-redesign/components/toolbar/show-history-button.tsx

@@ -25,7 +25,7 @@ export default function ShowHistoryButton() {
       <OLTooltip
         id="tooltip-open-history"
         description={t('history')}
-        overlayProps={{ placement: 'bottom' }}
+        overlayProps={{ delay: 0, placement: 'bottom' }}
       >
         <OLIconButton
           icon="history"

services/web/frontend/js/features/source-editor/components/table-generator/column-size-indicator.tsx

@@ -40,7 +40,7 @@ export const ColumnSizeIndicator = ({
               width: formattedWidth,
             })
       }
-      overlayProps={{ placement: 'bottom' }}
+      overlayProps={{ delay: 0, placement: 'bottom' }}
     >
       <button
         className="btn table-generator-column-indicator-button"

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/column-width-modal/modal.tsx

@@ -186,7 +186,7 @@ const ColumnWidthModalBody = () => {
                 <OLTooltip
                   id="table-generator-unit-tooltip"
                   description={unitHelp.tooltip}
-                  overlayProps={{ placement: 'top' }}
+                  overlayProps={{ delay: 0, placement: 'top' }}
                 >
                   <span>
                     <MaterialIcon type="help" className="align-middle" />

services/web/frontend/js/shared/components/tooltip.tsx

@@ -3,7 +3,6 @@ import {
   useEffect,
   forwardRef,
   useState,
-  useMemo,
   useCallback,
 } from 'react'
 import {
@@ -13,7 +12,6 @@ import {
   TooltipProps as BSTooltipProps,
 } from 'react-bootstrap'
 import { callFnsInSequence } from '@/utils/functions'
-import { useTooltipContext } from '@/shared/context/tooltip-provider'
 
 const DEFAULT_DELAY_SHOW = 300
 // Slightly lower value avoids flickering when an adjacent tooltip is shown before the previous one hides
@@ -36,26 +34,6 @@ const UpdatingTooltip = forwardRef<HTMLDivElement, BSTooltipProps>(
 )
 UpdatingTooltip.displayName = 'UpdatingTooltip'
 
-const chooseDelayOptions = (
-  delay?: number | { show: number; hide: number }
-): { show: number; hide: number } => {
-  if (typeof delay === 'object') {
-    return delay
-  }
-
-  if (typeof delay === 'number') {
-    return {
-      show: delay,
-      hide: Math.max(delay - 10, 0),
-    }
-  }
-
-  return {
-    show: DEFAULT_DELAY_SHOW,
-    hide: DEFAULT_DELAY_HIDE,
-  }
-}
-
 export type TooltipProps = {
   description: React.ReactNode
   id: string
@@ -75,22 +53,20 @@ function Tooltip({
 }: TooltipProps) {
   const [show, setShow] = useState(false)
 
-  const tooltipContext = useTooltipContext()
-
-  useEffect(() => {
-    const listener = (e: KeyboardEvent) => {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
       if (show && e.key === 'Escape') {
         setShow(false)
         e.stopPropagation()
       }
-    }
-
-    document.addEventListener('keydown', listener, true)
+    },
+    [show, setShow]
+  )
 
-    return () => {
-      document.removeEventListener('keydown', listener, true)
-    }
-  }, [show])
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [handleKeyDown])
 
   const hideTooltip = (e: React.MouseEvent) => {
     if (e.currentTarget instanceof HTMLElement) {
@@ -99,22 +75,13 @@ function Tooltip({
     setShow(false)
   }
 
-  const delayProps = useMemo(() => {
-    const delayOptions = chooseDelayOptions(overlayProps?.delay)
-    if (tooltipContext?.isTooltipOpen) {
-      delayOptions.show = 0
-      delayOptions.hide = 0
-    }
-    return delayOptions
-  }, [overlayProps?.delay, tooltipContext])
-
-  const handleToggle = useCallback(
-    (value: boolean) => {
-      tooltipContext?.setIsTooltipOpen(value)
-      setShow(value)
-    },
-    [tooltipContext]
-  )
+  const delay = overlayProps?.delay
+  let delayShow = DEFAULT_DELAY_SHOW
+  let delayHide = DEFAULT_DELAY_HIDE
+  if (delay !== undefined) {
+    delayShow = typeof delay === 'number' ? delay : delay.show
+    delayHide = typeof delay === 'number' ? Math.max(delay - 10, 0) : delay.hide
+  }
 
   return (
     <OverlayTrigger
@@ -128,11 +95,10 @@ function Tooltip({
         </UpdatingTooltip>
       }
       {...overlayProps}
-      delay={delayProps}
+      delay={{ show: delayShow, hide: delayHide }}
       placement={overlayProps?.placement || 'top'}
       show={show}
-      onToggle={handleToggle}
-      transition={!tooltipContext?.isTooltipOpen}
+      onToggle={setShow}
     >
       {overlayProps?.trigger === 'click'
         ? children

services/web/frontend/js/shared/context/tooltip-provider.tsx

@@ -1,41 +0,0 @@
-import {
-  createContext,
-  Dispatch,
-  FC,
-  PropsWithChildren,
-  SetStateAction,
-  useContext,
-  useMemo,
-  useState,
-} from 'react'
-import useDebounce from '@/shared/hooks/use-debounce'
-
-const TooltipContext = createContext<
-  | {
-      isTooltipOpen: boolean
-      setIsTooltipOpen: Dispatch<SetStateAction<boolean>>
-    }
-  | undefined
->(undefined)
-
-export const TooltipProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [isTooltipOpen, setIsTooltipOpen] = useState(false)
-
-  const debouncedIsTooltipOpen = useDebounce(isTooltipOpen, 100)
-
-  const value = useMemo(
-    () => ({
-      isTooltipOpen: debouncedIsTooltipOpen,
-      setIsTooltipOpen,
-    }),
-    [debouncedIsTooltipOpen, setIsTooltipOpen]
-  )
-
-  return (
-    <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>
-  )
-}
-
-export const useTooltipContext = () => {
-  return useContext(TooltipContext)
-}