diff --git a/docs/reference/actions.md b/docs/reference/actions.md
index fad03108..5df13778 100644
--- a/docs/reference/actions.md
+++ b/docs/reference/actions.md
@@ -141,6 +141,20 @@ You can append `@window` or `@document` to the event name (along with any filter
```
+Alternatively, you can append `@outside` to the event name which will act similar to `@document` but only trigger if the event's target is outside the element with the action.
+
+```html
+
+
+
+
+```
+
+In the example above, the user can close the popover explicitly via the close button or by clicking anywhere outside the `div.popover`, but clicking on the link inside the popover will not trigger the close action.
+
### Options
You can append one or more _action options_ to an action descriptor if you need to specify [DOM event listener options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters).
diff --git a/examples/controllers/details_controller.js b/examples/controllers/details_controller.js
new file mode 100644
index 00000000..925a616b
--- /dev/null
+++ b/examples/controllers/details_controller.js
@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+ close() {
+ this.element.removeAttribute("open")
+ }
+}
diff --git a/examples/index.js b/examples/index.js
index b44c9c76..a89e5f19 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -9,6 +9,9 @@ application.register("clipboard", ClipboardController)
import ContentLoaderController from "./controllers/content_loader_controller"
application.register("content-loader", ContentLoaderController)
+import DetailsController from "./controllers/details_controller"
+application.register("details", DetailsController)
+
import HelloController from "./controllers/hello_controller"
application.register("hello", HelloController)
diff --git a/examples/server.js b/examples/server.js
index a5573f33..35ad1abb 100644
--- a/examples/server.js
+++ b/examples/server.js
@@ -22,6 +22,7 @@ const pages = [
{ path: "/clipboard", title: "Clipboard" },
{ path: "/slideshow", title: "Slideshow" },
{ path: "/content-loader", title: "Content Loader" },
+ { path: "/details", title: "Details" },
{ path: "/tabs", title: "Tabs" },
]
diff --git a/examples/views/details.ejs b/examples/views/details.ejs
new file mode 100644
index 00000000..5eb6ca6e
--- /dev/null
+++ b/examples/views/details.ejs
@@ -0,0 +1,25 @@
+<%- include("layout/head") %>
+
+Opening outside a details item will close them, clicking inside details will not close that one.
+
+
+ Item 1
+
These are the details for item 1 with a and some additional content.
+
+
+
+ Item 2
+
These are the details for item 2 with a and some additional content.
+
+
+
+ Item 3
+
These are the details for item 3 with a and some additional content.
+
+
+
+ Item 4
+
These are the details for item 4 with a and some additional content.