refactor: extract tooltip feature as a global script

Former-commit-id: b64e0b67a1a425bb79055c1e42b12f5807836d66

1 files changed, 13 insertions, 10 deletions

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index 9f3a88a5..dcc881d3 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -2,10 +2,10 @@
   <!-- 操作按钮组 -->
   <div class="flex justify-between items-center mb-6">
     <div class="flex gap-2">
-      <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
+      <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
+          id="comments-toggle" title="评论" data-tooltip>
         <img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
-        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div>
       </button>
 
       <!-- 点赞按钮 -->
@@ -13,23 +13,25 @@
         <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2
             border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200
             hover:bg-black/5 hover:rounded-lg group animate-count-infinite"
-                onclick="sendLike('{{ .File.UniqueID | urlize }}')"
-                id="like-btn-{{ .File.UniqueID | urlize }}"
-                title="为这篇文章献上心脏"
-                data-liked-title="你已经献上心脏了">
+            onclick="sendLike('{{ .File.UniqueID | urlize }}')"
+            id="like-btn-{{ .File.UniqueID | urlize }}"
+            title="为这篇文章献上心脏"
+            data-liked-title="你已经献上心脏了"
+            data-tooltip>
           <img src="/img/heart-organ.svg" width="20" height="20" alt="点赞" class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ .File.UniqueID | urlize }}" />
           <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
-          <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">为这篇文章献上心脏</div>
         </button>
       </div>
     </div>
 
     <div class="flex gap-1">
-      <a href="https://t.me/teaparty418" target="_blank" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
+      <a href="https://t.me/teaparty418" target="_blank" data-tooltip
+          class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
         <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div>
       </a>
-      <a href="/sponsor" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
+      <a href="/sponsor" data-tooltip
+          class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
         <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div>
       </a>
@@ -120,7 +122,8 @@ function initializeLikes(pageId) {
   }
 
   function setLikedState() {
-    elements.icon?.classList.add('liked-heart', 'animate-heart-beat');
+    elements.icon?.classList.add('liked-heart');
+    elements.icon?.classList.add('animate-heart-beat');
     elements.count?.classList.add('liked-count');
     elements.btn.disabled = true;
     elements.container.classList.add('liked');