From 0d1fcecec095597bae40cdddd0aca383656c8181 Mon Sep 17 00:00:00 2001
From: Jeffrey Chen <78434827+TCOTC@users.noreply.github.com>
Date: Mon, 9 Mar 2026 11:43:50 +0800
Subject: [PATCH] Hover to reveal tooltip after a moment (#15625)
* :art: Hover to reveal tooltip after a moment https://github.com/siyuan-note/siyuan/issues/13642
* Apply suggestion from @Copilot
* :art: Hover to reveal tooltip after a moment https://github.com/siyuan-note/siyuan/issues/13642
---
app/src/assets/scss/component/_tooltips.scss | 60 ++------------------
app/src/assets/scss/util/_keyframes.scss | 2 +-
app/src/dialog/tooltip.ts | 10 +++-
app/src/layout/dock/Files.ts | 2 +-
4 files changed, 17 insertions(+), 57 deletions(-)
diff --git a/app/src/assets/scss/component/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss
index 87b076b5f..69e1fa523 100644
--- a/app/src/assets/scss/component/_tooltips.scss
+++ b/app/src/assets/scss/component/_tooltips.scss
@@ -12,9 +12,10 @@
border-radius: var(--b3-border-radius);
line-height: 17px;
max-width: 320px;
- animation-duration: 150ms;
- animation-fill-mode: both;
animation-name: zoomIn;
+ animation-duration: 100ms;
+ animation-delay: var(--b3-tooltips-delay, 500ms);
+ animation-fill-mode: both;
max-height: 90vh;
overflow: auto;
box-sizing: border-box;
@@ -55,7 +56,7 @@
background-color: var(--b3-tooltips-background);
border-radius: var(--b3-border-radius);
line-height: 17px;
- transform: scale(.8);
+ transform: scale(.9);
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
@@ -64,21 +65,11 @@
font-family: var(--b3-font-family);
}
- &::before {
- z-index: 1000001;
- width: 0;
- height: 0;
- content: "";
- border: 5px solid transparent;
- transform: scale(1.54);
- }
-
- &::after,
- &::before {
+ &::after {
pointer-events: none;
position: absolute;
opacity: 0;
- transition: opacity 150ms 0ms cubic-bezier(0, 0, .2, 1), transform 150ms 0ms cubic-bezier(0, 0, .2, 1);
+ transition: opacity 100ms var(--b3-tooltips-delay, 500ms) cubic-bezier(0, 0, .2, 1), transform 100ms var(--b3-tooltips-delay, 500ms) cubic-bezier(0, 0, .2, 1);
}
&:hover,
@@ -86,7 +77,6 @@
overflow: initial;
}
- &:hover::before,
&:hover::after {
display: inline-block;
opacity: 1;
@@ -101,16 +91,6 @@
margin-top: 5px
}
- &__s::before,
- &__se::before,
- &__sw::before {
- top: auto;
- right: 50%;
- bottom: -5px;
- margin-right: -5px;
- border-bottom-color: var(--b3-tooltips-background)
- }
-
&__se::after {
right: auto;
left: 50%;
@@ -129,16 +109,6 @@
margin-bottom: 5px
}
- &__n::before,
- &__ne::before,
- &__nw::before {
- top: -5px;
- right: 50%;
- bottom: auto;
- margin-right: -5px;
- border-top-color: var(--b3-tooltips-background)
- }
-
&__ne::after {
right: auto;
left: 50%;
@@ -166,14 +136,6 @@
transform: translateY(50%) scale(.8);
}
- &__w::before {
- top: 50%;
- bottom: 50%;
- left: -5px;
- margin-top: -5px;
- border-left-color: var(--b3-tooltips-background);
- }
-
&__e::after {
bottom: 50%;
left: 100%;
@@ -185,19 +147,9 @@
&__w:hover::after {
transform: translateY(50%) scale(1);
}
-
-
- &__e::before {
- top: 50%;
- right: -5px;
- bottom: 50%;
- margin-top: -5px;
- border-right-color: var(--b3-tooltips-background);
- }
}
@media screen and (max-width: 520px) {
- .b3-tooltips::before,
.b3-tooltips::after {
content: none;
}
diff --git a/app/src/assets/scss/util/_keyframes.scss b/app/src/assets/scss/util/_keyframes.scss
index 62051ab79..a40ef88c6 100644
--- a/app/src/assets/scss/util/_keyframes.scss
+++ b/app/src/assets/scss/util/_keyframes.scss
@@ -32,7 +32,7 @@
@keyframes zoomIn {
0% {
opacity: 0;
- transform: scale(.8);
+ transform: scale(.9);
}
to {
diff --git a/app/src/dialog/tooltip.ts b/app/src/dialog/tooltip.ts
index 5b73aaa3b..0127594e7 100644
--- a/app/src/dialog/tooltip.ts
+++ b/app/src/dialog/tooltip.ts
@@ -5,7 +5,8 @@ export const showTooltip = (
target: Element,
tooltipClass?: string,
event?: MouseEvent,
- space: number = 0.5
+ space: number = 0.5,
+ delay?: number
) => {
if (isMobile() || !message) {
return;
@@ -42,6 +43,13 @@ export const showTooltip = (
// 避免原本的 top 和 left 影响计算
messageElement.removeAttribute("style");
+ const delayAttr = target.closest("[data-tooltips-delay]")?.getAttribute("data-tooltips-delay");
+ const parsedDelay = parseInt(delayAttr, 10);
+ if (delay === undefined || delay === null) {
+ delay = Number.isFinite(parsedDelay) ? parsedDelay : 500;
+ }
+ messageElement.style.setProperty("--b3-tooltips-delay", delay + "ms");
+
const position = target.getAttribute("data-position");
const parentRect = target.parentElement.getBoundingClientRect();
diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts
index 7401a6cac..3c9463db6 100644
--- a/app/src/layout/dock/Files.ts
+++ b/app/src/layout/dock/Files.ts
@@ -128,7 +128,7 @@ export class Files extends Model {
-
+