HTML title 屬性提示文字顏色自定義：需用 CSS 模擬 Tooltip 實現

直接回答

原生 title 屬性的顏色、樣式完全由瀏覽器/操作系統控制，無法通過 CSS/JS 修改為紅色。

解決方案：自定義 Tooltip

1. CSS Only 方案：利用 data-title 屬性 + ::after 偽元素。
   

   <td data-title="驗證碼不能為空！">...</td>
   <style>
   td[data-title] { position: relative; }
   td[data-title]::after {
       content: attr(data-title);
       position: absolute; left: 0; top: -30px;
       background: red; color: white; padding: 2px 6px;
       border-radius: 4px; white-space: nowrap;
       opacity: 0; transition: opacity 0.2s; pointer-events: none;
   }
   td[data-title]:hover::after { opacity: 1; }
   </style>

2. JS 庫方案：引入成熟 Tooltip 庫 (如 MenuCool Tooltip)，支持豐富主題、動畫、定位邏輯。

核心點

• 原生 title 不可樣式化，必須棄用改用自定義屬性 (如 data-tooltip)。
• CSS 方案輕量無依賴，適合簡單場景；複雜交互建議用庫。