如何在 HTML 的 <select> 框中向 <option> 添加工具提示？答案

【问题标题】：How to add a tooltip to a <option> in a <select> box in HTML?如何在 HTML 的 <select> 框中向 <option> 添加工具提示？
【发布时间】：2015-11-04 05:02:37
【问题描述】：

在 Firefox 稳定版 (v38) 和早期版本的 chrome 中，我在节点上使用了“标题”HTML 属性，以便用户可以将鼠标悬停在给定选项上并查看工具提示或“悬停文本”。这是我所指的示例：

<select>
    <option title="hover text!">Thing 1</option>
    <option title="hover text!">Thing 5</option>
    <option title="hover text!">Thing 3</option>
    <option title="hover text!">Thing 2</option>
    <option title="hover text!">Thing 42</option>
</select>

这是上面代码的一个jsfiddle：http://jsfiddle.net/lsabota/bt3x780j/20/

这似乎适用于 Firefox stable (v38)，但不适用于最新的稳定版 Chrome，也不适用于 Firefox Aurora。我希望用户能够将鼠标悬停在任何选项上并查看标题文本（适用于旧版 Chrome 和最新版 Firefox）。我一直认为 title HTML 属性是做到这一点的正确方法——还有其他方法可以做到这一点吗？节点的标题属性是否已被弃用？

【问题讨论】：

在 Chrome 43.0.2357.8 中为我工作
我在 chrome 45 上，它正在工作。您只需将鼠标悬停在它上面一秒钟
也在 Firefox 39 (Aurora) 中为我工作
不适用于：谷歌浏览器：43.0.2357.81 m； Firefox：38.0.1 或 Opera：29.0.1795.60
我想知道这是否可能是特定于平台的？我在 Linux (RHEL6) 和 Windows 7 for Firefox 38.0.1、带有 firefox-aurora 的 Linux 和带有 Chrome 43.0.2357.81m 的 Windows 上都注意到了它。你们都在运行什么操作系统？

标签： html google-chrome firefox

【解决方案1】：

我在 mozilla bugzilla 上打开了一个错误，这已在 firefox 中解决。 “标题”是选项的有效属性，在主要浏览器中受到尊重

【讨论】：

【解决方案2】：

在做了一些谷歌和研究之后，我知道上面提到的最新版本的网络浏览器不适用于标题属性。 Title 属性不会被弃用。

【讨论】：

感谢您的评论；您介意分享您在其中找到此信息的任何链接吗？