Added buffer to all sides of Tooltip's floating content (#2359)

iTwin · Nov 27, 2024 · 87bbc99 · 87bbc99
1 parent 3f2b369
commit 87bbc99
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/clean-worms-destroy.md 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
@@ -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)) {