Improve Tooltip UX by enabling delay by default (#21383)

web/app/components/base/tooltip/index.spec.tsx

@@ -50,7 +50,7 @@ describe('Tooltip', () => {
 
     test('should close on mouse leave when triggerMethod is hover', () => {
       const triggerClassName = 'custom-trigger'
-      const { container } = render(<Tooltip popupContent="Tooltip content" triggerClassName={triggerClassName} />)
+      const { container } = render(<Tooltip popupContent="Tooltip content" triggerClassName={triggerClassName} needsDelay={false} />)
       const trigger = container.querySelector(`.${triggerClassName}`)
       act(() => {
         fireEvent.mouseEnter(trigger!)

web/app/components/base/tooltip/index.tsx

@@ -33,7 +33,7 @@ const Tooltip: FC<TooltipProps> = ({
   noDecoration,
   offset,
   asChild = true,
-  needsDelay = false,
+  needsDelay = true,
 }) => {
   const [open, setOpen] = useState(false)
   const [isHoverPopup, {
@@ -68,7 +68,7 @@ const Tooltip: FC<TooltipProps> = ({
       setTimeout(() => {
         if (!isHoverPopupRef.current && !isHoverTriggerRef.current)
           setOpen(false)
-      }, 500)
+      }, 300)
     }
     else {
       setOpen(false)