diff --git a/packages/components/README.md b/packages/components/README.md index 8980ca53cdea0c..3a5b9c3a642984 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -33,7 +33,9 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it ### Popovers and Tooltips -By default, the [`Popover`](/packages/components/src/popover/README.md) component will render inline i.e. within its +_If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._ + +By default, the `Popover` component will render inline i.e. within its parent to which it should anchor. Depending upon the context in which the `Popover` is being consumed, this might lead to incorrect positioning. For example, when being nested within another popover. diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md index a8547e769e8542..5f1783ec12f40f 100644 --- a/packages/components/src/border-box-control/border-box-control/README.md +++ b/packages/components/src/border-box-control/border-box-control/README.md @@ -60,10 +60,11 @@ const MyBorderBoxControl = () => { }; ``` -To [ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips) -for the `BorderBoxControl`'s color swatches, render your `BorderBoxControl` with -a `Popover.Slot` further up the element tree and within a -`SlotFillProvider` overall. +If you're using this component outside the editor, you can +[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips) +for the `BorderBoxControl`'s color and style options, by rendering your +`BorderBoxControl` with a `Popover.Slot` further up the element tree and within +a `SlotFillProvider` overall. ## Props diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 64464e13350493..a4d0f2017f2d65 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -43,9 +43,10 @@ const MyBorderControl = () => { }; ``` -To [ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips) -for the `BorderControl`'s color swatches, render your `BorderControl` with a -`Popover.Slot` further up the element tree and within a +If you're using this component outside the editor, you can +[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips) +for the `BorderControl`'s color and style options, by rendering your +`BorderControl` with a `Popover.Slot` further up the element tree and within a `SlotFillProvider` overall. ## Props diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md index 9d4d80271541a8..de195ca1fa3954 100644 --- a/packages/components/src/color-palette/README.md +++ b/packages/components/src/color-palette/README.md @@ -75,6 +75,8 @@ const MyColorPalette = () => { } ); ``` -To [ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips) -when hovering the `ColorPalette`'s swatches, render your `ColorPalette` with a -`Popover.Slot` further up the element tree and within a `SlotFillProvider` overall. +If you're using this component outside the editor, you can +[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips) +for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a +`Popover.Slot` further up the element tree and within a +`SlotFillProvider` overall.