docs(tooltip): add portal examples

Author: metonym

docs/src/pages/components/Tooltip.svx

@@ -107,4 +107,39 @@ Hide the icon while keeping the tooltip functionality using `hideIcon`.
   <p>
     Resources are provisioned based on your account's organization.
   </p>
-</Tooltip>
+</Tooltip>
+
+## Portal tooltip
+
+Use `portalTooltip` to render the tooltip in a portal, preventing it from being clipped by `overflow: hidden` containers. This is automatically enabled when the tooltip is inside a `Modal`.
+
+<Tooltip portalTooltip triggerText="Portalled">
+  <p>
+    This tooltip is rendered in a portal.
+  </p>
+</Tooltip>
+
+## Portal tooltip (hidden icon)
+
+Portal tooltips also work with `hideIcon`.
+
+<Tooltip portalTooltip hideIcon triggerText="Portalled (hidden icon)">
+  <p>
+    This tooltip is rendered in a portal without the icon.
+  </p>
+</Tooltip>
+
+## Portal tooltip directions
+
+Position portalled tooltips in different directions.
+
+<Tooltip portalTooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
+<Tooltip portalTooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
+<Tooltip portalTooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
+<Tooltip portalTooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
+
+## Inside a modal
+
+When a tooltip is used inside a [Modal](/components/Modal), it is automatically rendered in a portal so it is not clipped by the modal's overflow or z-index stacking. No need to set `portalTooltip` in this case.
+
+<FileSource src="/framed/Tooltip/TooltipModal" />

docs/src/pages/framed/Tooltip/TooltipModal.svelte

@@ -0,0 +1,29 @@
+<script>
+  import {
+    Button,
+    Modal,
+    Portal,
+    Stack,
+    Tooltip,
+  } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click={() => (open = true)}>Open modal</Button>
+
+<Portal>
+  <Modal
+    bind:open
+    size="sm"
+    modalHeading="Tooltip in modal"
+    primaryButtonText="Done"
+    secondaryButtonText="Cancel"
+    on:click:button--secondary={() => (open = false)}
+  >
+    <Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
+    <Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
+    <Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
+    <Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
+  </Modal>
+</Portal>