zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-02-25 07:25:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

fixes for tooltip auto-disappearing handling

Browse source
This commit is contained in:
zadam 2023-09-14 00:40:49 +02:00
parent 035113db4d
commit 40ca949890
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/public/app/services/note_tooltip.js
View file

@ -65,11 +65,12 @@ async function mouseEnterHandler() {
} }
const html = `<div class="note-tooltip-content">${content}</div>`; const html = `<div class="note-tooltip-content">${content}</div>`;
const tooltipClass = 'tooltip-' + Math.floor(Math.random() * 999_999_999);
// we need to check if we're still hovering over the element // 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 // 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 // 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({ $(this).tooltip({
container: 'body', container: 'body',
// https://github.com/zadam/trilium/issues/2794 https://github.com/zadam/trilium/issues/2988 // https://github.com/zadam/trilium/issues/2794 https://github.com/zadam/trilium/issues/2988
@ -79,19 +80,33 @@ async function mouseEnterHandler() {
boundary: 'window', boundary: 'window',
title: html, title: html,
html: true, html: true,
template: '<div class="tooltip note-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', template: `<div class="tooltip note-tooltip ${tooltipClass}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>`,
sanitize: false, sanitize: false,
customClass: linkId customClass: linkId
}); });
$(this).tooltip('show'); $(this).tooltip('show');
setTimeout(() => { // the purpose of the code below is to:
if (!$(this).is(":hover") && !$(`.${linkId}`).is(":hover")) { // - 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 // cursor is neither over the link nor over the tooltip, user likely is not interested
$(this).tooltip('dispose'); $(this).tooltip('dispose');
} else {
setTimeout(checkTooltip, 1000);
} }
}, 1000); }
setTimeout(checkTooltip, 1000);
} }
} }