fix: Tooltips trigger without a delay (#4419)

Partially (or may be fully) Fixes #4406
Closes #4410
Some issues can't be fixed with current tooltips - i.e. if hover from
tooltip is going onto the canvas we can't set delay on hover back.


## Description

1. Fixes focusable buttons had tooltip.
2. 

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/breakpoints/breakpoints-selector.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Breakpoint, Breakpoints } from "@webstudio-is/sdk";
 import {
-  EnhancedTooltip,
   Flex,
   Text,
   Toolbar,
@@ -156,10 +155,11 @@ export const BreakpointsSelector = ({
         {groupBreakpoints(Array.from(breakpoints.values())).map(
           (breakpoint) => {
             return (
-              <EnhancedTooltip
+              <Tooltip
                 key={breakpoint.id}
                 content={getTooltipContent(breakpoint)}
                 variant="wrapped"
+                disableHoverableContent
               >
                 <ToolbarToggleItem
                   variant="subtle"
@@ -180,7 +180,7 @@ export const BreakpointsSelector = ({
                       <BpStarOffIcon size={22} />
                     ))}
                 </ToolbarToggleItem>
-              </EnhancedTooltip>
+              </Tooltip>
             );
           }
         )}

packages/design-system/src/components/tooltip.tsx

@@ -66,6 +66,7 @@ export const Tooltip = forwardRef(
     },
     ref: Ref<HTMLDivElement>
   ) => {
+    const triggerRef = useRef<HTMLButtonElement>(null);
     // We need to intercept tooltip open
     const [open = false, setOpen] = useControllableState({
       prop: openProp,
@@ -95,15 +96,47 @@ export const Tooltip = forwardRef(
       props.onMouseLeave?.(event);
     };
 
-    return (
+    // There's no way to prevent a rendered trigger from opening.
+    // This causes delay issues when an invisible tooltip forces other tooltips to show immediately.
+    return content == null ? (
+      children
+    ) : (
       <TooltipPrimitive.Root
         open={open}
         defaultOpen={defaultOpen}
         onOpenChange={setOpen}
         delayDuration={delayDuration}
         disableHoverableContent={disableHoverableContent}
       >
-        <TooltipPrimitive.Trigger asChild {...triggerProps}>
+        <TooltipPrimitive.Trigger
+          asChild
+          ref={triggerRef}
+          {...triggerProps}
+          onFocus={(event) => {
+            // Prevent the tooltip from opening on focus
+            // The main issue is that after dialogs or selects, the tooltip button is autofocused and causes the tooltip to open
+            event.preventDefault();
+          }}
+          onPointerMove={(event) => {
+            // The tooltip captures pointer events, which can be an issue when the tooltip trigger is also the popover trigger.
+            // This is related to Popover.Anchor, but sometimes it can't be placed above the tooltip trigger.
+            // To prevent pointer movements from affecting the tooltip, we check if there’s an element between the target and the current dialog.
+            let currentElement =
+              event.target instanceof Element ? event.target : null;
+
+            while (
+              currentElement !== null &&
+              currentElement !== event.currentTarget
+            ) {
+              if (currentElement.getAttribute("role") === "dialog") {
+                event.preventDefault();
+                break;
+              }
+
+              currentElement = currentElement.parentElement;
+            }
+          }}
+        >
           {children}
         </TooltipPrimitive.Trigger>
         {content != null && (