@neo4j-ndl/react 4.18.12 → 4.19.0

package/skills/ndl-react/components/tooltip.md

@@ -11,7 +11,7 @@ Import: `import { Tooltip } from '@neo4j-ndl/react'`
 | `autoUpdateOptions` | `AutoUpdateOptions` |  |  |  |
 | `children` | `ReactNode` | ✅ |  | Content displayed inside the tooltip. Wraps `Tooltip.Trigger`, `Tooltip.Content`, and optional parts |
 | `floatingStrategy` | `'absolute' \| 'fixed'` |  |  | Positioning strategy of the tooltip. Defaults to `fixed` when inside a dialog, otherwise `absolute` |
-| `followCursor` | `boolean` |  |  | Whether the tooltip should follow the mouse cursor. Only applies to 'simple' tooltips with mouse hover. |
+| `followCursor` | `boolean \| "initial"` |  |  | Whether the tooltip should be positioned at the mouse cursor. Only applies to 'simple' tooltips with mouse hover. `true` follows the cursor continuously along one axis derived from `placement` (horizontal for top/bottom, vertical for left/right). `'initial'` opens the tooltip at the cursor's position (both axes) and keeps it there, like the native `title` attribute; `placement` controls which side of that point the tooltip appears on. |
 | `hoverDelay` | `{ open: number; close: number; }` |  |  | Hover open/close delays in milliseconds |
 | `isDisabled` | `boolean` |  | `false` | Whether the tooltip is disabled |
 | `isInitialOpen` | `boolean` |  |  | Whether the tooltip should be open on first render |
@@ -207,18 +207,50 @@ const triggerStyle: React.CSSProperties = {
 const Component = () => {
   return (
     <div style={{ display: 'flex', gap: '24px' }}>
-      <Tooltip type="simple" followCursor placement="bottom">
+      <Tooltip
+        type="simple"
+        followCursor
+        placement="bottom"
+        hoverDelay={{ close: 0, open: 500 }}
+      >
         <Tooltip.Trigger>
-          <div style={triggerStyle}>Hover me (x-axis)</div>
+          <div style={triggerStyle}>
+            followCursor with placement=&quot;bottom&quot;: follows on the
+            x-axis
+          </div>
         </Tooltip.Trigger>
-        <Tooltip.Content>Follows cursor along x-axis</Tooltip.Content>
+        <Tooltip.Content>Follows cursor along the x-axis</Tooltip.Content>
       </Tooltip>
 
-      <Tooltip type="simple" followCursor placement="right">
+      <Tooltip
+        type="simple"
+        followCursor
+        placement="right"
+        hoverDelay={{ close: 0, open: 500 }}
+      >
         <Tooltip.Trigger>
-          <div style={triggerStyle}>Hover me (y-axis)</div>
+          <div style={triggerStyle}>
+            followCursor with placement=&quot;right&quot;: follows on the y-axis
+          </div>
         </Tooltip.Trigger>
-        <Tooltip.Content>Follows cursor along y-axis</Tooltip.Content>
+        <Tooltip.Content>Follows cursor along the y-axis</Tooltip.Content>
+      </Tooltip>
+
+      <Tooltip
+        type="simple"
+        followCursor="initial"
+        placement="bottom"
+        hoverDelay={{ close: 0, open: 500 }}
+      >
+        <Tooltip.Trigger>
+          <div style={triggerStyle}>
+            followCursor=&quot;initial&quot;: opens at the cursor point and
+            stays there
+          </div>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          Pinned at the cursor position it opened at
+        </Tooltip.Content>
       </Tooltip>
     </div>
   );