From 158bf1015f059e2057536eec3da176f8e49e02e4 Mon Sep 17 00:00:00 2001
From: Neil Buckley <nfbuckley@gmail.com>
Date: Sat, 22 Oct 2022 02:19:49 -0700
Subject: [PATCH] [@mantine/core] Tooltip: Add nested tooltips support (#2768)

---
 src/mantine-core/src/Tooltip/Tooltip.tsx      |  3 +
 .../core/Tooltip/Tooltip.demo.nested.tsx      | 61 +++++++++++++++++++
 .../src/demos/core/Tooltip/index.ts           |  1 +
 3 files changed, 65 insertions(+)
 create mode 100644 src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.nested.tsx

diff --git a/src/mantine-core/src/Tooltip/Tooltip.tsx b/src/mantine-core/src/Tooltip/Tooltip.tsx
index 972bde7930d..5bf00ea0177 100644
--- a/src/mantine-core/src/Tooltip/Tooltip.tsx
+++ b/src/mantine-core/src/Tooltip/Tooltip.tsx
@@ -179,6 +179,9 @@ const _Tooltip = forwardRef<HTMLElement, TooltipProps>((props, ref) => {
           onClick,
           onMouseEnter,
           onMouseLeave,
+          onMouseMove: props.onMouseMove,
+          onPointerDown: props.onPointerDown,
+          onPointerEnter: props.onPointerEnter,
           [refProp]: targetRef,
           className: cx(className, children.props.className),
           ...children.props,
diff --git a/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.nested.tsx b/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.nested.tsx
new file mode 100644
index 00000000000..787a81c1ac3
--- /dev/null
+++ b/src/mantine-demos/src/demos/core/Tooltip/Tooltip.demo.nested.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { MantineDemo } from '@mantine/ds';
+import { Tooltip, Button, Group } from '@mantine/core';
+
+const code = `
+import { Tooltip, Button } from '@mantine/core';
+
+function Demo() {
+  return (
+    <Tooltip
+      label="top"
+      position="top"
+      closeDelay={1500}
+    >
+      <Tooltip
+        label="bottom"
+        position="bottom"
+        openDelay={500}
+        closeDelay={1000}
+      >
+        <Tooltip
+          label="left"
+          position="left"
+          openDelay={1000}
+          closeDelay={500}
+        >
+          <Tooltip
+            label="right"
+            position="right"
+            openDelay={1500}
+          >
+            <Button variant="outline">Nested Tooltips</Button>
+          </Tooltip>
+        </Tooltip>
+      </Tooltip>
+    </Tooltip>
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <Group position="center">
+      <Tooltip label="top" position="top" closeDelay={1500}>
+        <Tooltip label="bottom" position="bottom" openDelay={500} closeDelay={1000}>
+          <Tooltip label="left" position="left" openDelay={1000} closeDelay={500}>
+            <Tooltip label="right" position="right" openDelay={1500}>
+              <Button variant="outline">Nested Tooltips</Button>
+            </Tooltip>
+          </Tooltip>
+        </Tooltip>
+      </Tooltip>
+    </Group>
+  );
+}
+
+export const nested: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/core/Tooltip/index.ts b/src/mantine-demos/src/demos/core/Tooltip/index.ts
index 63e27b2e7af..a9764690ef2 100644
--- a/src/mantine-demos/src/demos/core/Tooltip/index.ts
+++ b/src/mantine-demos/src/demos/core/Tooltip/index.ts
@@ -9,3 +9,4 @@ export { usage } from './Tooltip.demo.usage';
 export { group } from './Tooltip.demo.group';
 export { offset } from './Tooltip.demo.offset';
 export { inline } from './Tooltip.demo.inline';
+export { nested } from './Tooltip.demo.nested';