widgets can have a help link with title

src/public/javascripts/widgets/attributes.js

@@ -6,6 +6,13 @@ import StandardWidget from "./standard_widget.js";
 class AttributesWidget extends StandardWidget {
     getWidgetTitle() { return "Attributes"; }
 
+    getHelp() {
+        return {
+            title: "Attributes are key-value records owned by assigned to this note.",
+            url: "https://github.com/zadam/trilium/wiki/Attributes"
+        };
+    }
+
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
         $showFullButton.click(async () => {

src/public/javascripts/widgets/edited_notes.js

@@ -6,6 +6,12 @@ import treeCache from "../services/tree_cache.js";
 class EditedNotesWidget extends StandardWidget {
     getWidgetTitle() { return "Edited notes on this day"; }
 
+    getHelp() {
+        return {
+            title: "This contains a list of notes created or updated on this day."
+        };
+    }
+
     getMaxHeight() { return "200px"; }
 
     async isEnabled() {

src/public/javascripts/widgets/link_map.js

@@ -11,6 +11,13 @@ const TPL = `
 class LinkMapWidget extends StandardWidget {
     getWidgetTitle() { return "Link map"; }
 
+    getHelp() {
+        return {
+            title: "Link map shows incoming and outgoing links from/to the current note.",
+            url: "https://github.com/zadam/trilium/wiki/Link-map"
+        };
+    }
+
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
         $showFullButton.click(async () => {

src/public/javascripts/widgets/note_revisions.js

@@ -9,6 +9,13 @@ const TPL = `
 class NoteRevisionsWidget extends StandardWidget {
     getWidgetTitle() { return "Note revisions"; }
 
+    getHelp() {
+        return {
+            title: "Note revisions track changes in the note across the time.",
+            url: "https://github.com/zadam/trilium/wiki/Note-revisions"
+        };
+    }
+
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
         $showFullButton.click(async () => {

src/public/javascripts/widgets/similar_notes.js

@@ -6,6 +6,12 @@ import treeCache from "../services/tree_cache.js";
 class SimilarNotesWidget extends StandardWidget {
     getWidgetTitle() { return "Similar notes"; }
 
+    getHelp() {
+        return {
+            title: "This list contains notes which might be similar to the current note based on textual similarity of note title."
+        };
+    }
+
     getMaxHeight() { return "200px"; }
 
     async doRenderBody() {

src/public/javascripts/widgets/standard_widget.js

@@ -2,10 +2,14 @@ import optionsService from "../services/options.js";
 
 const WIDGET_TPL = `
 <div class="card widget">
-    <div class="card-header">        
-        <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#[to be set]">
-            Collapsible Group Item
-        </button>
+    <div class="card-header">
+        <div>           
+            <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#[to be set]">
+                Collapsible Group Item
+            </button>
+            
+            <a class="widget-help external no-arrow jam jam-help"></a>
+        </div>
         
         <div class="widget-header-actions"></div>
     </div>
@@ -39,6 +43,8 @@ class StandardWidget {
 
     getHeaderActions() { return []; }
 
+    getHelp() { return {}; }
+
     getMaxHeight() { return null; }
 
     getPosition() { return this.widgetOptions.position; }
@@ -68,8 +74,25 @@ class StandardWidget {
         this.$widget.on('shown.bs.collapse', () => this.renderBody());
         this.$widget.on('shown.bs.collapse', () => this.ctx.stateChanged());
         this.$widget.on('hidden.bs.collapse', () => this.ctx.stateChanged());
+
         this.$title = this.$widget.find('.widget-title');
         this.$title.text(this.getWidgetTitle());
+
+        this.$help = this.$widget.find('.widget-help');
+        const help = this.getHelp();
+
+        if (help.title) {
+            this.$help.attr("title", help.title);
+            this.$help.attr("href", help.url || "javascript:");
+
+            if (!help.url) {
+                this.$help.addClass('no-link');
+            }
+        }
+        else {
+            this.$help.hide();
+        }
+
         this.$headerActions = this.$widget.find('.widget-header-actions');
         this.$headerActions.append(...this.getHeaderActions());
 

src/public/javascripts/widgets/what_links_here.js

@@ -6,6 +6,12 @@ class WhatLinksHereWidget extends StandardWidget {
 
     getMaxHeight() { return "200px"; }
 
+    getHelp() {
+        return {
+            title: "This list contains all notes which link to this note through links and relations."
+        };
+    }
+
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show link map").addClass('widget-header-action');
         $showFullButton.click(async () => {

src/public/stylesheets/desktop.css

@@ -386,6 +386,15 @@ body {
     cursor: pointer;
 }
 
+.note-detail-sidebar .widget-help {
+    color: var(--main-text-color);
+}
+
+.note-detail-sidebar .widget-help.no-link:hover {
+    cursor: default;
+    text-decoration: none;
+}
+
 .note-detail-sidebar .card-body {
     width: 100%;
     padding: 8px;

src/public/stylesheets/style.css

@@ -790,7 +790,7 @@ div[data-notify="container"] {
     border-radius: 0.2rem;
 }
 
-a.external:after, a[href^="http://"]:after, a[href^="https://"]:after {
+a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href^="https://"]:not(.no-arrow):after {
     font-size: smaller;
     content: "\2197";
     vertical-align: top;