Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 08:36:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: #13484, clear tooltip if cursor leaves link

Browse Source 
and doesn't enter tooltip
This commit is contained in:
Barış Soner Uşaklı
2025-06-10 12:39:49 -04:00
parent 8ab034d8f0
commit 0ebb31fe87
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/src/client/topic.js
View File

@@ -309,12 +309,14 @@ define('forum/topic', [
} }
let timeoutId = 0; let timeoutId = 0;
let destroyed = false; let destroyed = false;
let cursorOnPreviewTooltip = false;
const postCache = {}; const postCache = {};
function destroyTooltip() { function destroyTooltip() {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = 0; timeoutId = 0;
$('#post-tooltip').remove(); $('#post-tooltip').remove();
destroyed = true; destroyed = true;
cursorOnPreviewTooltip = false;
} }
function onClickOutside(ev) { function onClickOutside(ev) {
@@ -328,6 +330,14 @@ define('forum/topic', [
$('[component="topic"]').on('mouseenter', 'a[component="post/parent"], [component="post/parent/content"] a,[component="post/content"] a, [component="topic/event"] a', async function () { $('[component="topic"]').on('mouseenter', 'a[component="post/parent"], [component="post/parent/content"] a,[component="post/content"] a, [component="topic/event"] a', async function () {
const link = $(this); const link = $(this);
link.one('mouseleave', function () { link.one('mouseleave', function () {
setTimeout(() => {
// If the mouse leaves the link and it's not on a tooltip, destroy the tooltip after a short delay
if (!cursorOnPreviewTooltip) {
destroyTooltip();
}
}, 300);
// if mouse leaves the link before the tooltip is rendered, clear the timeout
if (timeoutId > 0) { if (timeoutId > 0) {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = 0; timeoutId = 0;
@@ -352,7 +362,9 @@ define('forum/topic', [
const linkRect = link.offset(); const linkRect = link.offset();
const { top } = link.get(0).getBoundingClientRect(); const { top } = link.get(0).getBoundingClientRect();
const dropup = top > window.innerHeight / 2; const dropup = top > window.innerHeight / 2;
tooltip.on('mouseenter', function () {
onPreviewTooltip = true;
});
tooltip.one('mouseleave', destroyTooltip); tooltip.one('mouseleave', destroyTooltip);
$(window).off('click', onClickOutside).one('click', onClickOutside); $(window).off('click', onClickOutside).one('click', onClickOutside);
tooltip.css({ tooltip.css({