tooltip related changes for scripting support

src/public/javascripts/services/bootstrap.js

@@ -28,7 +28,7 @@ import treeUtils from './tree_utils.js';
 import utils from './utils.js';
 import server from './server.js';
 import entrypoints from './entrypoints.js';
-import tooltip from './tooltip.js';
+import noteTooltipService from './note_tooltip.js';
 import bundle from "./bundle.js";
 import treeCache from "./tree_cache.js";
 import libraryLoader from "./library_loader.js";
@@ -141,6 +141,6 @@ treeService.showTree();
 
 entrypoints.registerEntrypoints();
 
-tooltip.setupTooltip();
+noteTooltipService.setupGlobalTooltip();
 
 bundle.executeStartupBundles();

src/public/javascripts/services/frontend_script_api.js

@@ -6,6 +6,7 @@ import linkService from './link.js';
 import treeCache from './tree_cache.js';
 import noteDetailService from './note_detail.js';
 import noteTypeService from './note_type.js';
+import noteTooltipService from './note_tooltip.js';
 
 /**
  * This is the main frontend API interface for scripts. It's published in the local "api" object.
@@ -225,6 +226,12 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null) {
      * @param {array} types - list of mime types to be used
      */
     this.setCodeMimeTypes = noteTypeService.setCodeMimeTypes;
+
+    /**
+     * @method
+     * @param {object} $el - jquery object on which to setup the tooltip
+     */
+    this.setupElementTooltip = noteTooltipService.setupElementTooltip
 }
 
 export default FrontendScriptApi;

src/public/javascripts/services/note_tooltip.js

@@ -3,8 +3,20 @@ import treeUtils from "./tree_utils.js";
 import linkService from "./link.js";
 import server from "./server.js";
 
-function setupTooltip() {
+function setupGlobalTooltip() {
-    $(document).on("mouseenter", "a", async function() {
+    $(document).on("mouseenter", "a", mouseEnterHandler);
+    $(document).on("mouseleave", "a", mouseLeaveHandler);
+
+    // close any tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
+    $(document).on("click", () => $('.tooltip').remove());
+}
+
+function setupElementTooltip($el) {
+    $el.on('mouseenter', mouseEnterHandler);
+    $el.on('mouseleave', mouseLeaveHandler);
+}
+
+async function mouseEnterHandler() {
     const $link = $(this);
 
     if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
@@ -51,14 +63,10 @@ function setupTooltip() {
 
         $(this).tooltip('show');
     }
-    });
+}
 
-    $(document).on("mouseleave", "a", function() {
+function mouseLeaveHandler() {
     $(this).tooltip('dispose');
-    });
-
-    // close any tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
-    $(document).on("click", () => $('.tooltip').remove());
 }
 
 async function renderTooltip(note, attributes) {
@@ -103,7 +111,9 @@ async function renderTooltip(note, attributes) {
     }
 
     if (note.type === 'text') {
-        content += note.content;
+        // surround with <div> for a case when note.content is pure text (e.g. "[protected]") which
+        // then fails the jquery non-empty text test
+        content += '<div>' + note.content + '</div>';
     }
     else if (note.type === 'code') {
         content += $("<pre>")
@@ -125,5 +135,6 @@ async function renderTooltip(note, attributes) {
 }
 
 export default {
-    setupTooltip
+    setupGlobalTooltip,
+    setupElementTooltip
 }