diff --git a/src/public/app/services/note_tooltip.js b/src/public/app/services/note_tooltip.js
index 540d3e3b20..be6214be94 100644
--- a/src/public/app/services/note_tooltip.js
+++ b/src/public/app/services/note_tooltip.js
@@ -65,11 +65,12 @@ async function mouseEnterHandler() {
}
const html = `
${content}
`;
+ const tooltipClass = 'tooltip-' + Math.floor(Math.random() * 999_999_999);
// 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")) {
+ if ($(this).filter(":hover").length > 0) {
$(this).tooltip({
container: 'body',
// https://github.com/zadam/trilium/issues/2794 https://github.com/zadam/trilium/issues/2988
@@ -79,19 +80,33 @@ async function mouseEnterHandler() {
boundary: 'window',
title: html,
html: true,
- template: '',
+ template: ``,
sanitize: false,
customClass: linkId
});
$(this).tooltip('show');
- setTimeout(() => {
- if (!$(this).is(":hover") && !$(`.${linkId}`).is(":hover")) {
+ // the purpose of the code below is to:
+ // - allow user to go from hovering the link to hovering the tooltip to be able to scroll,
+ // click on links within tooltip etc. without tooltip disappearing
+ // - once the user moves the cursor away from both link and the tooltip, hide the tooltip
+ const checkTooltip = () => {
+ if (!$(`.${tooltipClass}`).is(':visible')) {
+ console.log("Not visible anymore");
+
+ return;
+ }
+
+ if (!$(this).filter(":hover").length && !$(`.${linkId}:hover`).length) {
// cursor is neither over the link nor over the tooltip, user likely is not interested
$(this).tooltip('dispose');
+ } else {
+ setTimeout(checkTooltip, 1000);
}
- }, 1000);
+ }
+
+ setTimeout(checkTooltip, 1000);
}
}