From bfcfc09da5dcbf5f6a465f083399429cdc63e447 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Mon, 11 Nov 2024 20:11:47 +0100
Subject: [PATCH] chore: add example to documentation for an overflowing
 tooltip, causing a scrollbar. when clicking outside after interacting with
 the tooltips scrollbar, the on close will not be fired when using the click
 event trigger. We need to use the mouseup trigger in that case.

Signed-off-by: David Edler <david.edler@canonical.com>
---
 www/docs/Overlay.mdx | 56 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/www/docs/Overlay.mdx b/www/docs/Overlay.mdx
index 1ade65b..a0574a6 100644
--- a/www/docs/Overlay.mdx
+++ b/www/docs/Overlay.mdx
@@ -153,3 +153,59 @@ function Example() {
   );
 }
 ```
+
+## Scroll example
+
+When the overlay is overflowing and contains a scrollbar, use the `rootCloseEvent="mouseup"` to ensure the overlay is closed when clicking the scrollbar and then outside of it.
+
+```jsx live editor=collapse
+import clsx from "clsx";
+import { Overlay } from "@restart/ui";
+import Button from "../src/Button";
+import Tooltip from "../src/Tooltip";
+
+function OverlayScrollTooltip() {
+  const [show, setShow] = useState(false);
+  const triggerRef = useRef(null);
+  const containerRef = useRef(null);
+
+  const toggleShow = () => {
+    setShow(!show);
+  };
+
+  return (
+    <div
+      className="flex flex-col items-center"
+      ref={containerRef}
+    >
+      <Button
+        className="mb-4"
+        id="overlay-toggle"
+        ref={triggerRef}
+        onClick={toggleShow}
+      >
+        Toggle a tooltip with a scrollbar
+      </Button>
+      <Overlay
+        show={show}
+        rootClose
+        rootCloseEvent="mouseup"
+        placement="left"
+        container={containerRef}
+        target={triggerRef}
+        onHide={toggleShow}
+      >
+        {(props, { arrowProps, popper }) => (
+          <Tooltip {...props} arrowProps={arrowProps} popper={popper}>
+              <div style={{ width: 150, height: 100, overflow: "auto"}}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hend rerit arcu
+            </div>
+          </Tooltip>
+        )}
+      </Overlay>
+    </div>
+  );
+}
+
+<OverlayScrollTooltip />;
+```
\ No newline at end of file