Hover to reveal tooltip after a moment (#15625)

* 🎨 Hover to reveal tooltip after a moment https://github.com/siyuan-note/siyuan/issues/13642

* Apply suggestion from @Copilot

* 🎨 Hover to reveal tooltip after a moment https://github.com/siyuan-note/siyuan/issues/13642

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;
   }

app/src/assets/scss/util/_keyframes.scss

@@ -32,7 +32,7 @@
 @keyframes zoomIn {
   0% {
     opacity: 0;
-    transform: scale(.8);
+    transform: scale(.9);
   }
 
   to {

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();
 

app/src/layout/dock/Files.ts

@@ -128,7 +128,7 @@ export class Files extends Model {
     <span class="fn__space"></span>
     <span data-type="min" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min}${updateHotkeyAfterTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
-<div class="fn__flex-1" style="padding-top: 2px;"></div>
+<div class="fn__flex-1" style="padding-top: 2px;" data-tooltips-delay="200"></div>
 <ul class="b3-list fn__flex-column" style="min-height: auto;height:30px;transition: height  .2s cubic-bezier(0, 0, .2, 1) 0ms">
     <li class="b3-list-item" data-type="toggle">
         <span class="b3-list-item__toggle">