Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-19 02:10:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tooltip): Sometimes tooltip flashes

Browse Source
This commit is contained in:
SiriusXT 2025-05-13 22:15:00 +08:00
parent 2f582a4f9a
commit 5ce0383c03
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/src/services/note_tooltip.ts
View File

@ -8,6 +8,9 @@ import appContext from "../components/app_context.js";
import type FNote from "../entities/fnote.js"; import type FNote from "../entities/fnote.js";
import { t } from "./i18n.js"; import { t } from "./i18n.js";
// Track all elements that open tooltips
let openTooltipElements: JQuery<HTMLElement>[] = [];
function setupGlobalTooltip() { function setupGlobalTooltip() {
$(document).on("mouseenter", "a", mouseEnterHandler); $(document).on("mouseenter", "a", mouseEnterHandler);
@ -23,7 +26,11 @@ function setupGlobalTooltip() {
} }
function dismissAllTooltips() { function dismissAllTooltips() {
$(".note-tooltip").remove(); openTooltipElements.forEach($el => {
$el.tooltip("dispose");
$el.removeAttr("aria-describedby");
});
openTooltipElements = [];
} }
function setupElementTooltip($el: JQuery<HTMLElement>) { function setupElementTooltip($el: JQuery<HTMLElement>) {
@ -86,8 +93,8 @@ async function mouseEnterHandler(this: HTMLElement) {
// 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).filter(":hover").length > 0) { if ($link.filter(":hover").length > 0) {
$(this).tooltip({ $link.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
// with bottom this flickering happens a bit less // with bottom this flickering happens a bit less
@ -103,7 +110,9 @@ async function mouseEnterHandler(this: HTMLElement) {
}); });
dismissAllTooltips(); dismissAllTooltips();
$(this).tooltip("show"); $link.tooltip("show");
openTooltipElements.push($link);
// Dismiss the tooltip immediately if a link was clicked inside the tooltip. // Dismiss the tooltip immediately if a link was clicked inside the tooltip.
$(`.${tooltipClass} a`).on("click", (e) => { $(`.${tooltipClass} a`).on("click", (e) => {
@ -115,7 +124,8 @@ async function mouseEnterHandler(this: HTMLElement) {
// click on links within tooltip etc. without tooltip disappearing // 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 // - once the user moves the cursor away from both link and the tooltip, hide the tooltip
const checkTooltip = () => { const checkTooltip = () => {
if (!$(this).filter(":hover").length && !$(`.${linkId}:hover`).length) {
if (!$link.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
dismissAllTooltips(); dismissAllTooltips();
} else { } else {