要實現工具提示，最基礎的方式是使用 html 的 title 屬性，1. 使用 title 屬性可快速添加基礎提示，但樣式和交互受限；2. 通過 html + css 可創建自定義樣式、動畫效果的 tooltip，提升美觀性和可控性；3. 引入 JavaScript 可實現動態內容與復雜交互，如點擊顯示、延遲彈出等，也可結合第三方庫提高效率。根據項目需求選擇合適方案即可。
要實現工具提示，HTML 提供了最基礎的方式，但想要更靈活、美觀的效果，通常需要結合 css 甚至 JavaScript。下面我們就從幾種常見的方式來聊聊 HTML 中如何創建 tooltip。
1. 最簡單的辦法：用 title 屬性
在 HTML 中，最直接的工具提示實現方式就是使用 title 屬性。只要你給任何元素加上這個屬性，當鼠標懸停時就會顯示提示文字。
<button title="點擊提交表單">提交</button>
這種方式優點是簡單快捷，不需要額外寫樣式或腳本。但缺點也很明顯：樣式完全由瀏覽器控制，無法自定義外觀，而且響應速度慢、交互體驗一般。適合只需要基礎提示的場景。
立即學習“前端免費學習筆記（深入）”；
2. 自定義 tooltip：用 CSS 和 HTML 結合
如果你希望 tooltip 看起來更美觀、可控性更強，可以自己用 HTML + CSS 實現一個。基本思路是用一個 span 或 div 來作為提示框，通過 CSS 控制它的顯示和位置。
<span class="tooltip">懸停我 <span class="tooltiptext">這是一個自定義提示</span> </span>
對應的 CSS：
.tooltip { position: relative; cursor: help; } .tooltiptext { visibility: hidden; width: 150px; background: #333; color: #fff; text-align: center; border-radius: 4px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
這樣就能做出一個會動畫出現、帶樣式的 tooltip。你可以根據需求調整顏色、位置、動畫等，靈活性遠超 title 屬性。不過要注意的是，移動端這種 hover 效果可能不太友好，需要額外適配。
3. 進階玩法：用 JavaScript 增強交互
如果需要動態內容或者更復雜的交互（比如點擊才彈出、延遲顯示、跟隨鼠標等），就可以引入 JavaScript 來控制 tooltip 的行為。你可以監聽事件，在特定時機顯示或隱藏 tooltip。
比如在按鈕上加個點擊顯示提示的功能：
<button onclick="showTooltip()">點我</button> <div id="myTooltip" class="custom-tooltip">這是 JS 控制的提示</div>
配合一點 JS：
function showTooltip() { var tooltip = document.getElementById("myTooltip"); tooltip.style.display = "block"; setTimeout(function () { tooltip.style.display = "none"; }, 2000); }
當然，你也可以結合第三方庫如 Tooltip.js、Popper.js 來實現更強大的功能，這對于復雜項目來說更高效可靠。
基本上就這些方法了。想快速搞定就用 title，想要好看就上 CSS，再講究點交互就動點 JS —— 工具提示這玩意兒不復雜，但真的挺常用，選適合自己項目的方案就好。
