chore: change tooltip timings & behavior (#2402)

packages/web/package.json

@@ -108,7 +108,7 @@
     "app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
   },
   "dependencies": {
-    "@ariakit/react": "^0.2.8",
+    "@ariakit/react": "^0.2.15",
     "@lexical/headless": "0.11.3",
     "@radix-ui/react-slot": "^1.0.1",
     "fast-diff": "^1.3.0"

packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx

@@ -362,6 +362,7 @@ const NoteConflictResolutionModal = ({
             <div className={isPreviewMode ? 'mr-9' : ''}>Diff Mode</div>
             {showSuperConversionInfo && (
               <StyledTooltip
+                interactive
                 className="!z-modal !max-w-[50ch]"
                 label={
                   <>

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -12,6 +12,7 @@ const StyledTooltip = ({
   label,
   showOnMobile = false,
   showOnHover = true,
+  interactive = false,
   ...props
 }: {
   children: ReactNode
@@ -19,11 +20,14 @@ const StyledTooltip = ({
   className?: string
   showOnMobile?: boolean
   showOnHover?: boolean
+  interactive?: boolean
 } & Partial<TooltipOptions>) => {
   const [forceOpen, setForceOpen] = useState<boolean | undefined>()
 
   const tooltip = useTooltipStore({
-    timeout: 350,
+    timeout: 500,
+    hideTimeout: 0,
+    skipTimeout: 0,
     open: forceOpen,
   })
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
@@ -35,7 +39,7 @@ const StyledTooltip = ({
   return (
     <>
       <TooltipAnchor
-        onFocus={() => setForceOpen(true)}
+        onClick={() => setForceOpen(false)}
         onBlur={() => setForceOpen(undefined)}
         store={tooltip}
         as={Slot}
@@ -44,6 +48,7 @@ const StyledTooltip = ({
         {children}
       </TooltipAnchor>
       <Tooltip
+        tabIndex={undefined}
         autoFocusOnShow={!showOnHover}
         store={tooltip}
         className={classNames(
@@ -53,6 +58,10 @@ const StyledTooltip = ({
         updatePosition={() => {
           const { popoverElement, anchorElement, open } = tooltip.getState()
 
+          if (!interactive && popoverElement) {
+            popoverElement.style.pointerEvents = 'none'
+          }
+
           const documentElement = document.querySelector('.main-ui-view')
 
           if (!popoverElement || !anchorElement || !documentElement || !open) {

yarn.lock

@@ -43,9 +43,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ariakit/react-core@npm:0.2.14":
-  version: 0.2.14
-  resolution: "@ariakit/react-core@npm:0.2.14"
+"@ariakit/react-core@npm:0.2.15":
+  version: 0.2.15
+  resolution: "@ariakit/react-core@npm:0.2.15"
   dependencies:
     "@ariakit/core": 0.2.7
     "@floating-ui/dom": ^1.0.0
@@ -53,19 +53,19 @@ __metadata:
   peerDependencies:
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 34391ffc3b8587c14d5663bd4b0a582f6e9dab4674c08f0103f7bdb035690f404a24c9e79bfbb58cb9fad43edc6eb00ae5e928463fd358705466cd09e59afd24
+  checksum: 47a9cddd6bae86300b564b159e93ae3d005d13b1d095ac2862b09c986f4dee11e5a73dd7f494cb36519abf5360b8457dd9eeb28434d5b273ca9ff004d72d909a
   languageName: node
   linkType: hard
 
-"@ariakit/react@npm:^0.2.8":
-  version: 0.2.14
-  resolution: "@ariakit/react@npm:0.2.14"
+"@ariakit/react@npm:^0.2.15":
+  version: 0.2.15
+  resolution: "@ariakit/react@npm:0.2.15"
   dependencies:
-    "@ariakit/react-core": 0.2.14
+    "@ariakit/react-core": 0.2.15
   peerDependencies:
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 7c2836484fb15c76871172b276a53640def873052dca489f520155bc80c9c7e11b4acc0a44baf055239b59c46e1221ab4c1c41ba9186ffbc89ff59d5ed685bb8
+  checksum: b20fb428f80768f6ef90658503ddfb56df23117077a2d3f53c3e6dc7362a57692b39f900c0a347831c83cf1e33159cb247e9813cb3310e8fbe57a93b6074b6f1
   languageName: node
   linkType: hard
 
@@ -4984,7 +4984,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@standardnotes/web@workspace:packages/web"
   dependencies:
-    "@ariakit/react": ^0.2.8
+    "@ariakit/react": ^0.2.15
     "@babel/core": "*"
     "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-transform-react-jsx": ^7.19.0