From 87bbc99316c17bd2b763a730135fbb45c84b0e82 Mon Sep 17 00:00:00 2001
From: Uyen Doan <56598021+smmr-dn@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:53:27 -0600
Subject: [PATCH] Added buffer to all sides of `Tooltip`'s floating content
 (#2359)

---
 .changeset/clean-worms-destroy.md             | 5 +++++
 packages/itwinui-css/src/tooltip/tooltip.scss | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/clean-worms-destroy.md

diff --git a/.changeset/clean-worms-destroy.md b/.changeset/clean-worms-destroy.md
new file mode 100644
index 00000000000..6102d08e5c7
--- /dev/null
+++ b/.changeset/clean-worms-destroy.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+The `Tooltip` now remains visible when hovered up to `4px` outside its border.
diff --git a/packages/itwinui-css/src/tooltip/tooltip.scss b/packages/itwinui-css/src/tooltip/tooltip.scss
index d504c6d4e8f..d3d6191fd29 100644
--- a/packages/itwinui-css/src/tooltip/tooltip.scss
+++ b/packages/itwinui-css/src/tooltip/tooltip.scss
@@ -9,7 +9,7 @@
   text-align: center;
   border-radius: var(--iui-border-radius-1);
   font-size: var(--iui-font-size-0);
-  overflow: hidden;
+  overflow: visible;
   max-inline-size: 400px;
   inline-size: max-content;
   overflow-wrap: break-word;
@@ -21,6 +21,12 @@
   color: var(--iui-color-white);
   border: 1px solid rgba(255, 255, 255, var(--iui-opacity-4));
 
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
+
   @include mixins.iui-blur($hsl: 0 0% 0%, $opacity: 3);
 
   &:where([hidden], [popover]:not(:popover-open)) {