前端頁面提示效果實現：原生 title 屬性與自定義浮動層

兩種主要實現方式

1. 使用原生 title 屬性（簡單、無樣式控制）

直接在標簽上添加 title 屬性，瀏覽器自動處理顯示/隱藏、定位。

<p title="給段落文字提示">文字內容</p>
<a href="#" title="給鏈接文字提示">鏈接文字</a>
<img src="image.gif" alt="給圖片提示" title="圖片標題">

• 優點：零代碼成本，語義化，無障礙友好。
• 缺點：樣式不可控，無法包含 HTML，延遲固定，移動端體驗差。

2. 手寫 JS 浮動層（完全可控、推薦生產環境）

核心邏輯：預定義隱藏的提示容器，監聽目標元素的鼠標事件，動態計算位置並顯示/隱藏。

關鍵步驟

1. HTML 結構：頁面底部放置一個 <div id="tooltip"></div>，CSS 設置 position:absolute; display:none; z-index:9999;。
2. 事件綁定：對需要提示的元素綁定 onmouseover（或 mouseenter）和 onmouseout（或 mouseleave）。
3. 顯示邏輯：mouseover 時，將提示內容注入容器，根據觸發元素 getBoundingClientRect() 計算坐標，設置容器 left/top，最後 display:block。
4. 隱藏邏輯：mouseout 時 display:none。
5. 進階優化：添加淡入/淡出動畫、防抖處理快速移入移出、邊界檢測防止超出視口、支持 HTML 富文本內容。

簡易代碼框架

<style>
#tooltip { position:absolute; background:#333; color:#fff; padding:8px 12px; border-radius:4px; font-size:13px; display:none; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
#tooltip::after { content:''; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:#333; }
</style>
<div id="tooltip"></div>

<script>
const tooltip = document.getElementById('tooltip');
document.querySelectorAll('[data-tip]').forEach(el => {
    el.addEventListener('mouseenter', e => {
        tooltip.innerHTML = el.dataset.tip;
        const rect = el.getBoundingClientRect();
        tooltip.style.left = rect.left + window.scrollX + rect.width/2 - tooltip.offsetWidth/2 + 'px';
        tooltip.style.top = rect.top + window.scrollY - tooltip.offsetHeight - 8 + 'px';
        tooltip.style.display = 'block';
    });
    el.addEventListener('mouseleave', () => tooltip.style.display = 'none');
});
</script>

<!-- 使用示例 -->
<button data-tip="點擊提交表單<br><b>快捷鍵: Ctrl+Enter</b>">提交</button>

選擇建議

• 極簡項目、內部工具、輔助說明：直接用 title。
• 面向用戶的產品、需要品牌風格、包含鏈接/按鈕/圖片的複雜提示：必須自定義浮動層或使用成熟庫（Tippy.js, Popper.js, Bootstrap Tooltip）。