網頁工具提示（Tooltip）實現方案：jQuery 插件與原生 CSS/JS 實現

常見實現方式

1. 原生 HTML title 屬性：

   <button title="這是提示文字">懸停我</button>
   

   優點：零代碼；缺點：樣式不可控、延遲固定、無法包含 HTML。
2. 純 CSS Tooltip：

   .tooltip { position: relative; }
   .tooltip::after {
       content: attr(data-tip);
       position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
       background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;
       white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s;
   }
   .tooltip:hover::after { opacity: 1; }
   

   • <span class="tooltip" data-tip="提示內容">懸停我</span>
   • 優點：無 JS、效能極佳、可動畫；缺點：複雜交互（如點擊關閉、跟隨滑鼠）難實現。
3. jQuery 插件：
   • qTip2：功能最全，支援定位、動畫、AJAX 內容、觸發方式。
   • Tooltipster：輕量、主題豐富、支援 HTML 內容。
   • Popper.js + 自訂邏輯：現代定位引擎，配合任意 UI 庫。
4. 原生 JS 實現：監聽 mouseenter/mouseleave，動態建立/銷毀 div.tooltip，使用 Element.getBoundingClientRect() 定位。

騰訊漫畫風格建議

• 使用 CSS + 少量 JS：基礎顯示/隱藏用 CSS :hover，複雜邏輯（如延遲隱藏、點擊外部關閉）用 JS 增強。
• 內容支援 HTML：data-html="true" 解析 data-tip 為 HTML 字串。
• 無障礙：加上 role="tooltip", aria-describedby。

參考資源

• jQuery Tooltip 插件總結
• 10 款 jQuery Tooltip 插件評測