[Tooltip] Reduce surrounding margin

Shopify · Aug 15, 2023 · bc1f4aa · bc1f4aa
1 parent a36581b
commit bc1f4aa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/late-countries-remain.md b/.changeset/late-countries-remain.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Reduced surrounding margin of Tooltip to allow for interaction with nearby UI elements.
diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx
@@ -315,7 +315,10 @@ export class PositionedOverlay extends PureComponent<
           preferredAlignment,
         );
 
-        const chevronOffset = activatorRect.center.x - horizontalPosition;
+        const chevronOffset =
+          activatorRect.center.x -
+          horizontalPosition +
+          overlayMargins.horizontal * 2;
 
         this.setState(
           {

diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -8,7 +8,7 @@
   // stylelint-enable
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: var(--pc-tooltip-overlay-offset) var(--p-space-4) var(--p-space-4);
+  margin: var(--pc-tooltip-overlay-offset) var(--p-space-1) var(--p-space-1);
   opacity: 1;
   box-shadow: var(--p-shadow-lg);
   // stylelint-disable-next-line -- Polaris component custom properties
@@ -106,7 +106,7 @@
 
 .positionedAbove {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: var(--p-space-4) var(--p-space-4) var(--pc-tooltip-overlay-offset);
+  margin: var(--p-space-1) var(--p-space-1) var(--pc-tooltip-overlay-offset);
 }
 
 .Content {