diff --git a/docs/assets/content/introPopupCareer.png b/docs/assets/content/introPopupCareer.png
new file mode 100644
index 00000000..c52c18e4
Binary files /dev/null and b/docs/assets/content/introPopupCareer.png differ
diff --git a/docs/assets/content/introPopupMission.png b/docs/assets/content/introPopupMission.png
index 965d5fd8..0863dea7 100644
Binary files a/docs/assets/content/introPopupMission.png and b/docs/assets/content/introPopupMission.png differ
diff --git a/docs/en/beamng/snippets.md b/docs/en/beamng/snippets.md
index 9c6f284c..8c6e449c 100644
--- a/docs/en/beamng/snippets.md
+++ b/docs/en/beamng/snippets.md
@@ -221,27 +221,115 @@ Multiple can be displayed at once, displayed sequentially.
+#### introPopupTutorial
+
+introPopupTutorial is a highly customizable popup that is largely defined with embedded HTML. It is standard to load from a standalone HTML file located in `/gameplay/tutorials/pages/*/content.html`.
+
+```lua
+guihooks.trigger("introPopupTutorial", {
+ {
+ content = readFile("/gameplay/tutorials/pages/template/content.html"):gsub("\r\n",""),
+ flavour = "onlyOk"
+ }
+})
+
+guihooks.trigger("introPopupClose")
+```
+
+If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, then it is displayed in a separate popup after the existing popup is closed.
+
+Flavours controls which buttons are displayed. Four flavours exist:
+
+* `withLogbook`
+ * Buttons: Career Logbook, Okay
+* `onlyOk`
+ * Buttons: Okay
+* `onlyLogbook`
+ * Buttons: Career Logbook
+* `noButtons`
+ * Provides no buttons
+
+!!! warning
+
+ When using the noButtons flavour on the page, providing no extra JavaScript in the page content to close the popup causes a softlock. Pages are not combined into one popup in this flavour. It is not recommended to use this flavour.
+
+#### introPopupCareer
+
+introPopupCareer is an easy to use, but open ended popup that supports embedding HTML, if needed.
+
+If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, then it is displayed in a separate popup after the existing popup is closed.
+
+```lua
+guihooks.trigger("introPopupCareer", {
+ {
+ title = "Example title",
+ text = "Example text",
+ image = "/gameplay/tutorials/pages/template/image.jpg",
+ ratio = "16x9",
+ flavour = "default"
+ }
+})
+
+guihooks.trigger("introPopupClose")
+```
+
+
+ 
+
+
+Flavours control which buttons are displayed and the default image aspect ratio. Four flavours exist:
+
+* `default`
+ * Default image aspect ratio: 16x9
+ * Buttons: Later, Okay
+* `welcome`
+ * Default image aspect ratio: 16x9
+ * Buttons: Career Logbook, Okay
+* `branch-info`
+ * Default image aspect ratio: 16x9
+ * Buttons: Career Logbook, Okay
+* `garage`
+ * Buttons: Later, Okay
+
+!!! bug
+
+ The background blur has a minimum height, causing popups with short content to have excess blur below its window. Two main workarounds exist:
+
+ * Repeat `\n` and end with `#!html ` until the window covers the blur
+ * Use an empty or missing `image` path and adjust the aspect ratio until the window covers the blur
+
#### introPopupMission
-introPopupMission is a more advanced and visually striking popup system. It supports any number of buttons, embedding HTML, and has a larger window than ConfirmationDialog.
+introPopupMission is almost identical to introPopupCareer, but requires defining buttons rather than picking a preset for buttons.
-It has three built-in button themes to choose from:
+If multiple pages are provided, or the hook is triggered multiple times, then the pages are combined into the same popup. If the hook is triggered while a introPopup is active, then it is displayed in a separate popup after the existing popup is closed.
-* main - orange
-* secondary - cyan
-* attention - red
+Button styles are combined as *bng-button-*`style`. Built-in button styles are:
+
+* `main` - orange
+* `secondary` - cyan
+* `attention` - red
+* `white` - white
+* `link` - translucent
+* `outline` - orange outline
```lua
guihooks.trigger('introPopupMission', {
- title="introPopupMission title",
- text="introPopupMission description"..
- "\n\n\n\n\n\n\n\n\n\n\n\n\n\n",
+ title = "introPopupMission title",
+ text = "introPopupMission description",
+ image = "/gameplay/tutorials/pages/template/image.jpg",
+ ratio = "16x9",
buttons = {
{ default=true, class="main", label="main button", clickLua="" },
{ default=false, class="secondary", label="secondary button", clickLua="" },
- { default=false, class="attention", label="attention button", clickLua="" }
+ { default=false, class="attention", label="attention button", clickLua="" },
+ { default=false, class="white", label="white button", clickLua="" },
+ { default=false, class="link", label="link button", clickLua="" },
+ { default=false, class="outline", label="outline button", clickLua="" }
}
})
+
+guihooks.trigger("introPopupClose")
```
@@ -250,9 +338,10 @@ guihooks.trigger('introPopupMission', {
!!! bug
- The background blur has a minimum height, causing popups with short content to have excess blur below its window.
+ The background blur has a minimum height, causing popups with short content to have excess blur below its window. Two main workarounds exist:
- As a workaround, you can repeat `\n` and end with `#!html ` until the window covers the blur.
+ * Repeat `\n` and end with `#!html ` until the window covers the blur
+ * Use an empty or missing `image` path and adjust the aspect ratio until the window covers the blur
#### Dialogue