migrated tooltips to bootstrap, #203

src/public/javascripts/services/tooltip.js

@@ -4,50 +4,57 @@ import linkService from "./link.js";
 import server from "./server.js";
 
 function setupTooltip() {
-    $(document).tooltip({
+    $(document).on("mouseenter", "a", async function() {
-        items: "body a",
+        const $link = $(this);
-        content: function (callback) {
-            const $link = $(this);
 
-            if ($link.hasClass("no-tooltip-preview")) {
+        if ($link.hasClass("no-tooltip-preview")) {
-                return;
+            return;
-            }
-
-            // this is to avoid showing tooltip from inside CKEditor link editor dialog
-            if ($link.closest(".ck-link-actions").length) {
-                return;
-            }
-
-            let notePath = linkService.getNotePathFromUrl($link.attr("href"));
-
-            if (!notePath) {
-                notePath = $link.attr("data-note-path");
-            }
-
-            if (notePath) {
-                const noteId = treeUtils.getNoteIdFromNotePath(notePath);
-
-                const notePromise = noteDetailService.loadNote(noteId);
-                const attributePromise = server.get('notes/' + noteId + '/attributes');
-
-                Promise.all([notePromise, attributePromise])
-                    .then(([note, attributes]) => renderTooltip(callback, note, attributes));
-            }
-        },
-        close: function (event, ui) {
-            ui.tooltip.hover(function () {
-                    $(this).stop(true).fadeTo(400, 1);
-                },
-                function () {
-                    $(this).fadeOut('400', function () {
-                        $(this).remove();
-                    });
-                });
         }
+
+        // this is to avoid showing tooltip from inside CKEditor link editor dialog
+        if ($link.closest(".ck-link-actions").length) {
+            return;
+        }
+
+        let notePath = linkService.getNotePathFromUrl($link.attr("href"));
+
+        if (!notePath) {
+            notePath = $link.attr("data-note-path");
+        }
+
+        if (!notePath) {
+            return;
+        }
+
+        const noteId = treeUtils.getNoteIdFromNotePath(notePath);
+
+        const notePromise = noteDetailService.loadNote(noteId);
+        const attributePromise = server.get('notes/' + noteId + '/attributes');
+
+        const [note, attributes] = await Promise.all([notePromise, attributePromise]);
+
+        const html = await renderTooltip(note, attributes);
+
+        // we need to check if we're still hovering over the element
+        // since the operation to get tooltip content was async, it is possible that
+        // we now create tooltip which won't close because it won't receive mouseleave event
+        if ($(this).is(":hover")) {
+            $(this).tooltip({
+                delay: {"show": 300, "hide": 100},
+                title: html,
+                html: true
+            });
+
+            $(this).tooltip('show');
+        }
+    });
+
+    $(document).on("mouseleave", "a", async function() {
+        $(this).tooltip('hide');
     });
 }
 
-async function renderTooltip(callback, note, attributes) {
+async function renderTooltip(note, attributes) {
     let content = '';
     const promoted = attributes.filter(attr =>
         (attr.type === 'label-definition' || attr.type === 'relation-definition')
@@ -97,10 +104,10 @@ async function renderTooltip(callback, note, attributes) {
     // other types of notes don't have tooltip preview
 
     if (!$(content).text().trim()) {
-        return;
+        return "";
     }
 
-    callback(content);
+    return content;
 }
 
 export default {

src/public/stylesheets/style.css

@@ -525,4 +525,18 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 .modal-body {
     max-height: calc(100vh - 120px);
     overflow-y: auto;
+}
+
+.tooltip-inner {
+    background-color: white !important;
+    max-width: 600px;
+    max-height: 500px;
+    overflow: hidden;
+    color: black;
+    border: 1px solid #777;
+    text-align: left;
+}
+
+.tooltip.show {
+    opacity: 1;
 }

src/views/index.ejs

@@ -316,8 +316,6 @@
       <% include dialogs/protected_session_password.ejs %>
       <% include dialogs/recent_changes.ejs %>
       <% include dialogs/sql_console.ejs %>
-
-      <div id="tooltip" style="display: none;"></div>
     </div>
 
     <script type="text/javascript">
@@ -339,14 +337,11 @@
     <link href="/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <script src="/libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
 
-    <link href="/libraries/jqueryui/jquery-ui.min.css" rel="stylesheet">
-    <script src="/libraries/jqueryui/jquery-ui.min.js"></script>
-
     <script src="/libraries/bootstrap-notify.min.js"></script>
 
     <!-- Include Fancytree skin and library -->
     <link href="/libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
-    <script src="/libraries/fancytree/jquery.fancytree-all.min.js"></script>
+    <script src="/libraries/fancytree/jquery.fancytree-all-deps.min.js"></script>
 
     <script src="/libraries/jquery.hotkeys.js"></script>
     <script src="/libraries/jquery.fancytree.hotkeys.js"></script>

src/views/login.ejs

@@ -43,6 +43,6 @@
     <!-- Required for correct loading of scripts in Electron -->
     <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-    <link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   </body>
 </html>

src/views/setup.ejs

@@ -122,13 +122,13 @@
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-<script src="libraries/jquery.min.js"></script>
+<script src="/libraries/jquery.min.js"></script>
 
-<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+<link href="/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-<script src="libraries/bootstrap/js/bootstrap.min.js"></script>
+<script src="/libraries/bootstrap/js/bootstrap.min.js"></script>
 
 <script src="/libraries/knockout.min.js"></script>
 
-<script src="javascripts/setup.js" type="module"></script>
+<script src="/javascripts/setup.js" type="module"></script>
 </body>
 </html>