diff --git a/.changeset/late-files-join.md b/.changeset/late-files-join.md
new file mode 100644
index 00000000000..0cdd2115f47
--- /dev/null
+++ b/.changeset/late-files-join.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added an optional `zIndexOverride` prop to `Tooltip`
diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index 9d61db5c111..338c924117d 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -55,6 +55,8 @@ export interface TooltipProps {
* @default '1'
*/
borderRadius?: BorderRadius;
+ /** Override on the default z-index of 400 */
+ zIndexOverride?: number;
/* Callback fired when the tooltip is activated */
onOpen?(): void;
/* Callback fired when the tooltip is dismissed */
@@ -73,6 +75,7 @@ export function Tooltip({
width = 'default',
padding = 'default',
borderRadius = '1',
+ zIndexOverride,
onOpen,
onClose,
}: TooltipProps) {
@@ -132,6 +135,7 @@ export function Tooltip({
width={width}
padding={padding}
borderRadius={borderRadius}
+ zIndexOverride={zIndexOverride}
>
{content}
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
index 5982a3ec94b..5e81315e551 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
@@ -22,6 +22,7 @@ export interface TooltipOverlayProps {
width?: Width;
padding?: Padding;
borderRadius?: BorderRadius;
+ zIndexOverride?: number;
onClose(): void;
}
@@ -36,6 +37,7 @@ export function TooltipOverlay({
width,
padding,
borderRadius,
+ zIndexOverride,
}: TooltipOverlayProps) {
const i18n = useI18n();
const markup = active ? (
@@ -45,6 +47,7 @@ export function TooltipOverlay({
preferredPosition={preferredPosition}
preventInteraction={preventInteraction}
render={renderTooltip}
+ zIndexOverride={zIndexOverride}
/>
) : null;
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx
index 24e46868fa4..f189facb2d3 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx
@@ -35,4 +35,21 @@ describe('', () => {
'aria-label': accessibilityLabel,
});
});
+
+ it('is set to value of zIndexOverride prop if given', () => {
+ const activator = document.createElement('button');
+ const tooltipOverlay = mountWithApp(
+
+ Content
+ ,
+ );
+
+ expect(tooltipOverlay).toContainReactComponent('div', {
+ style: expect.objectContaining({zIndex: 100}),
+ });
+ });
});
diff --git a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
index 5981607bc5b..4fc3d741765 100644
--- a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
+++ b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
@@ -239,6 +239,18 @@ describe('', () => {
});
});
+ it("passes 'zIndexOverride' to TooltipOverlay", () => {
+ const tooltip = mountWithApp(
+
+ link content
+ ,
+ );
+
+ expect(tooltip).toContainReactComponent(TooltipOverlay, {
+ zIndexOverride: 100,
+ });
+ });
+
describe('width', () => {
it('renders content with the default width', () => {
const tooltip = mountWithApp(