search input tooltip WIP

src/public/javascripts/services/note_tooltip.js

@@ -8,7 +8,7 @@ function setupGlobalTooltip() {
     $(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());
+    //$(document).on("click", () => $('.tooltip').remove());
 }
 
 function setupElementTooltip($el) {

src/public/javascripts/services/search_notes.js

@@ -16,6 +16,17 @@ const $closeSearchButton = $("#close-search-button");
 function showSearch() {
     $searchBox.slideDown();
     $searchInput.focus();
+
+    $searchBox.tooltip({
+        trigger: 'focus',
+        html: true,
+        title: 'Hello! <a href="http://google.com" class="external">google</a>',
+        placement: 'right',
+        delay: {
+            show: 500, // necessary because sliding out may cause wrong position
+            hide: 500
+        }
+    });
 }
 
 function hideSearch() {

src/public/stylesheets/style.css

@@ -685,9 +685,9 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 }
 
 /* this should help with tooltip flickering */
-.tooltip {
+/*.tooltip {*/
-    pointer-events: none;
+/*    pointer-events: none;*/
-}
+/*}*/
 
 .tooltip-inner {
     background-color: var(--accented-background-color) !important;

src/views/desktop.ejs

@@ -107,7 +107,8 @@
         <div id="search-box">
             <div class="form-group">
                 <div class="input-group">
-                    <input name="search-text" id="search-text" class="form-control" placeholder="Search text, labels" autocomplete="off">
+                    <input name="search-text" id="search-text" class="form-control"
+                           placeholder="Search text, labels" autocomplete="off">
 
                     <div class="input-group-append">
                         <button id="do-search-button" class="btn btn-sm icon-button jam jam-search" title="Search (enter)"></button>