Tooltip: Fix jitter at edge of screen by enabling __unstableShift (#41524)

andrewserong · aaronrobertshaw · web-flow · commit 0a460f104b73 · 2022-06-03T16:16:59.000+10:00
* Tooltip: Fix jitter at edge of screen by enabling __unstableShift

* Add changelog entry

* Fix typo in changelog

Co-authored-by: Aaron Robertshaw &lt;60436221+aaronrobertshaw@users.noreply.github.com&gt;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fix
 
+-   `Tooltip`: Opt in to `__unstableShift` to ensure that the Tooltip is always within the viewport. ([#41524](https://github.com/WordPress/gutenberg/pull/41524))
 -   `FormTokenField`: Do not suggest the selected one even if `{ value: string }` is passed ([#41216](https://github.com/WordPress/gutenberg/pull/41216)).
 -   `CustomGradientBar`: Fix insertion and control point positioning to more closely follow cursor. ([#41492](https://github.com/WordPress/gutenberg/pull/41492))
 
diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
@@ -65,6 +65,7 @@ const addPopoverToGrandchildren = ( {
 				aria-hidden="true"
 				animate={ false }
 				offset={ 12 }
+				__unstableShift
 			>
 				{ text }
 				<Shortcut

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ const addPopoverToGrandchildren = ( {`
`65`	`65`	`aria-hidden="true"`
`66`	`66`	`animate={ false }`
`67`	`67`	`offset={ 12 }`
	`68`	`+ __unstableShift`
`68`	`69`	`>`
`69`	`70`	`{ text }`
`70`	`71`	`<Shortcut`