Highlight SlotFill provider is only needed when building outside editor

WordPress · Mar 25, 2022 · 7a96330 · 7a96330
1 parent ace40d1
commit 7a96330
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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.