diff --git a/.changeset/green-elephants-jog.md b/.changeset/green-elephants-jog.md
new file mode 100644
index 000000000..d0960eff5
--- /dev/null
+++ b/.changeset/green-elephants-jog.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+fix: overlay docs error: 'return' outside of function
diff --git a/docs/fundamentals/systems/overlays/configuration.md b/docs/fundamentals/systems/overlays/configuration.md
index 4b0bb1fe9..06bbe6d15 100644
--- a/docs/fundamentals/systems/overlays/configuration.md
+++ b/docs/fundamentals/systems/overlays/configuration.md
@@ -77,14 +77,16 @@ As specified in the [overlay rationale](./rationale.md) there are only two offic
 Since most overlays have interactive content the default is set to dialogs. To get a tooltip, you can add `isTooltip` to the config object. This only works for local placement and it also needs to have `handlesAccessibility` activated to work.
 
 ```js preview-story
-const tooltipConfig = { ...withTooltipConfig() };
+export const usingTooltipConfig = () => {
+  const tooltipConfig = { ...withTooltipConfig() };
 
-return html`
-  <demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}>
-    <button slot="invoker">Hover me to open the tooltip!</button>
-    <div slot="content" class="demo-overlay">Hello!</div>
-  </demo-el-using-overlaymixin>
-`;
+  return html`
+    <demo-el-using-overlaymixin id="tooltip" .config=${tooltipConfig}>
+      <button slot="invoker">Hover me to open the tooltip!</button>
+      <div slot="content" class="demo-overlay">Hello!</div>
+    </demo-el-using-overlaymixin>
+  `;
+};
 ```
 
 ## trapsKeyboardFocus