From 8a3f508825ffd4a199f1af3697bed943292617d7 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Wed, 14 Nov 2018 19:33:48 +0100
Subject: [PATCH] "go to selected note" button now has also note tooltip

---
 .../javascripts/services/note_autocomplete.js | 19 ++++++++++---------
 src/public/javascripts/services/tooltip.js    |  4 ++--
 src/public/stylesheets/style.css              |  4 ++--
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/public/javascripts/services/note_autocomplete.js b/src/public/javascripts/services/note_autocomplete.js
index 8396aaf89..964b3aa93 100644
--- a/src/public/javascripts/services/note_autocomplete.js
+++ b/src/public/javascripts/services/note_autocomplete.js
@@ -2,7 +2,8 @@ import server from "./server.js";
 import noteDetailService from "./note_detail.js";
 import treeService from './tree.js';
 
-const SELECTED_PATH_KEY = "selected-path";
+// this key needs to have this value so it's hit by the tooltip
+const SELECTED_PATH_KEY = "data-note-path";
 
 async function autocompleteSource(term, cb) {
     const result = await server.get('autocomplete'
@@ -36,17 +37,16 @@ function initNoteAutocomplete($el, options) {
 
         $el.addClass("note-autocomplete-input");
 
-        const $clearTextButton = $("<span>")
+        const $clearTextButton = $("<a>")
                 .addClass("input-group-text input-clearer-button jam jam-close")
                 .prop("title", "Clear text field");
 
-        const $showRecentNotesButton = $("<span>")
+        const $showRecentNotesButton = $("<a>")
                 .addClass("input-group-text show-recent-notes-button jam jam-clock")
                 .prop("title", "Show recent notes");
 
-        const $goToSelectedNoteButton = $("<span>")
-            .addClass("input-group-text go-to-selected-note-button jam jam-arrow-right")
-            .prop("title", "Go to selected note");
+        const $goToSelectedNoteButton = $("<a>")
+            .addClass("input-group-text go-to-selected-note-button jam jam-arrow-right");
 
         const $sideButtons = $("<div>")
             .addClass("input-group-append")
@@ -105,19 +105,20 @@ $.fn.getSelectedPath = function() {
         return "";
     }
     else {
-        return $(this).data(SELECTED_PATH_KEY);
+        return $(this).attr(SELECTED_PATH_KEY);
     }
 };
 
 $.fn.setSelectedPath = function(path) {
     path = path || "";
 
-    $(this).data(SELECTED_PATH_KEY, path);
+    $(this).attr(SELECTED_PATH_KEY, path);
 
     $(this)
         .closest(".input-group")
         .find(".go-to-selected-note-button")
-        .toggleClass("disabled", !path.trim());
+        .toggleClass("disabled", !path.trim())
+        .attr(SELECTED_PATH_KEY, path); // we also set attr here so tooltip can be displayed
 };
 
 ko.bindingHandlers.noteAutocomplete = {
diff --git a/src/public/javascripts/services/tooltip.js b/src/public/javascripts/services/tooltip.js
index f9e6d0205..6bcd881b4 100644
--- a/src/public/javascripts/services/tooltip.js
+++ b/src/public/javascripts/services/tooltip.js
@@ -7,7 +7,7 @@ function setupTooltip() {
     $(document).on("mouseenter", "a", async function() {
         const $link = $(this);
 
-        if ($link.hasClass("no-tooltip-preview")) {
+        if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
             return;
         }
 
@@ -54,7 +54,7 @@ function setupTooltip() {
     });
 
     // close any tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
-    $(document).on("click", () => $('[rel=tooltip]').tooltip("hide"));
+    $(document).on("click", () => $('.tooltip').remove());
 }
 
 async function renderTooltip(note, attributes) {
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 70588c39c..30abfe676 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -483,9 +483,9 @@ html.theme-dark body {
     padding-right: 3px;
 }
 
-.go-to-selected-note-button.disabled {
+.go-to-selected-note-button.disabled, .go-to-selected-note-button.disabled:hover {
     cursor: inherit;
-    color: #ccc;
+    color: #ccc !important;
 }
 
 .note-autocomplete-input {