diff --git a/PlotLine/Views/StoryAssets/Index.cshtml b/PlotLine/Views/StoryAssets/Index.cshtml
index 8695f1b..a520ae0 100644
--- a/PlotLine/Views/StoryAssets/Index.cshtml
+++ b/PlotLine/Views/StoryAssets/Index.cshtml
@@ -18,7 +18,7 @@
-
Story assets
+
Story assets
@Model.Project.ProjectName
diff --git a/PlotLine/Views/Timeline/Settings.cshtml b/PlotLine/Views/Timeline/Settings.cshtml
index c009f6a..d283600 100644
--- a/PlotLine/Views/Timeline/Settings.cshtml
+++ b/PlotLine/Views/Timeline/Settings.cshtml
@@ -44,7 +44,7 @@
Sections
-
Workspace sections
+
Workspace sections
diff --git a/PlotLine/Views/_ViewImports.cshtml b/PlotLine/Views/_ViewImports.cshtml
index d37ef38..ed3292a 100644
--- a/PlotLine/Views/_ViewImports.cshtml
+++ b/PlotLine/Views/_ViewImports.cshtml
@@ -2,3 +2,4 @@
@using PlotLine.Models
@using PlotLine.ViewModels
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, PlotLine
diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css
index bc57317..dd4a65a 100644
--- a/PlotLine/wwwroot/css/plotline-theme.css
+++ b/PlotLine/wwwroot/css/plotline-theme.css
@@ -1453,6 +1453,55 @@ a:focus-visible {
--bs-alert-border-color: #705229;
}
+.plotweaver-help-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.15rem;
+ height: 1.15rem;
+ margin-left: 0.35rem;
+ padding: 0;
+ color: #5f6875;
+ font-size: 0.78rem;
+ font-weight: 800;
+ line-height: 1;
+ background: transparent;
+ border: 1px solid rgba(95, 104, 117, 0.42);
+ border-radius: 999px;
+ vertical-align: text-top;
+}
+
+.plotweaver-help-icon:hover,
+.plotweaver-help-icon:focus {
+ color: #2f6f63;
+ border-color: #2f6f63;
+ outline: none;
+}
+
+.plotweaver-help-popover {
+ max-width: 350px;
+}
+
+.plotweaver-help-popover .popover-header {
+ font-weight: 800;
+}
+
+.plotweaver-help-more {
+ font-weight: 700;
+ text-decoration: none;
+}
+
+[data-theme="dark"] .plotweaver-help-icon {
+ color: #d8d0c4;
+ border-color: rgba(216, 208, 196, 0.45);
+}
+
+[data-theme="dark"] .plotweaver-help-icon:hover,
+[data-theme="dark"] .plotweaver-help-icon:focus {
+ color: #f1c38f;
+ border-color: #f1c38f;
+}
+
.relationship-map-controls {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr)) auto auto auto;
diff --git a/PlotLine/wwwroot/js/site.js b/PlotLine/wwwroot/js/site.js
index b48ae8f..21aa455 100644
--- a/PlotLine/wwwroot/js/site.js
+++ b/PlotLine/wwwroot/js/site.js
@@ -151,6 +151,73 @@
});
})();
+(() => {
+ const icons = document.querySelectorAll("[data-help-icon]");
+ if (!icons.length || !window.bootstrap) {
+ return;
+ }
+
+ icons.forEach((icon) => {
+ const micro = icon.dataset.helpMicro || "Help article not found.";
+ const title = icon.dataset.helpTitle || "Help unavailable";
+ const summary = icon.dataset.helpSummary || "Help content has not yet been written for this feature.";
+
+ bootstrap.Tooltip.getOrCreateInstance(icon, {
+ title: micro,
+ trigger: "hover focus",
+ placement: "top",
+ container: "body"
+ });
+
+ const popover = bootstrap.Popover.getOrCreateInstance(icon, {
+ title,
+ trigger: "click",
+ placement: "auto",
+ container: "body",
+ html: true,
+ customClass: "plotweaver-help-popover",
+ content() {
+ const wrapper = document.createElement("div");
+ const summaryText = document.createElement("p");
+ summaryText.className = "mb-2";
+ summaryText.textContent = summary;
+
+ const moreLink = document.createElement("a");
+ moreLink.href = "#";
+ moreLink.textContent = "More...";
+ moreLink.className = "plotweaver-help-more";
+ moreLink.addEventListener("click", (event) => {
+ event.preventDefault();
+ icon.dispatchEvent(new CustomEvent("plotweaver:help-more", {
+ bubbles: true,
+ detail: { key: icon.dataset.helpKey || "" }
+ }));
+ });
+
+ wrapper.append(summaryText, moreLink);
+ return wrapper;
+ }
+ });
+
+ icon.addEventListener("shown.bs.popover", () => {
+ bootstrap.Tooltip.getInstance(icon)?.hide();
+ });
+
+ document.addEventListener("click", (event) => {
+ if (event.target === icon || icon.contains(event.target)) {
+ return;
+ }
+
+ const popoverElement = document.querySelector(`#${icon.getAttribute("aria-describedby")}`);
+ if (popoverElement?.contains(event.target)) {
+ return;
+ }
+
+ popover.hide();
+ });
+ });
+})();
+
(() => {
const roots = document.querySelectorAll(".scene-inspector-root");
if (!roots.length) {