Reduce tooltip offset to match the first impl

element-hq · Apr 12, 2024 · a94c9fc · a94c9fc
1 parent e7a1ee8
commit a94c9fc
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/...ht/visual.test.ts-snapshots/Form-Controls-Password-Visible-1-chromium-linux.png b/...ht/visual.test.ts-snapshots/Form-Controls-Password-Visible-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Tooltip-Forced-Open-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Tooltip-Forced-Open-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Tooltip-Placement-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Tooltip-Placement-1-chromium-linux.png
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Tooltip > opens tooltip on focus 1`] = `
   class="_tooltip_9b26f8"
   id=":ri:"
   role="tooltip"
-  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 8px);"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 6px);"
   tabindex="-1"
 >
   <svg
@@ -94,7 +94,7 @@ exports[`Tooltip > opens tooltip on focus where trigger is non interactive 2`] =
   class="_tooltip_9b26f8"
   id=":ro:"
   role="tooltip"
-  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 8px);"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 6px);"
   tabindex="-1"
 >
   <svg
@@ -195,7 +195,7 @@ exports[`Tooltip > renders default tooltip 1`] = `
   class="_tooltip_9b26f8"
   id=":rc:"
   role="tooltip"
-  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 8px);"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 6px);"
   tabindex="-1"
 >
   <svg
@@ -360,7 +360,7 @@ exports[`Tooltip > renders with caption 2`] = `
   class="_tooltip_9b26f8"
   id=":r12:"
   role="tooltip"
-  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 8px);"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 6px);"
   tabindex="-1"
 >
   <svg

diff --git a/src/components/Tooltip/useTooltip.ts b/src/components/Tooltip/useTooltip.ts
@@ -98,8 +98,8 @@ export function useTooltip({
     onOpenChange: setOpen,
     whileElementsMounted: autoUpdate,
     middleware: [
-      // arrow height 6px + 2px padding
-      offset(8),
+      // arrow height 6px
+      offset(6),
       flip({
         crossAxis: placement.includes("-"),
         fallbackAxisSideDirection: "start",