如何在HTML“选项”标签上显示工具提示？
无论是使用纯HTML还是jQuery辅助的JavaScript，如何在单个<option>元素上显示工具提示以帮助决策过程（ 没有足够的空间用于其他types的控制，并且需要一些帮助 ）。
这可以通过插件或类似的方式来完成吗？
我已经尝试了几个工具提示插件jQuery没有成功（包括一个称为工具提示）。
该解决scheme应该：
- 在IE，WebKit以及Gecko中工作;
- 利用标准的
<select>包装的<option>元素。
因此，如果解决scheme想要使用其他标签，它应该将这些元素dynamic地转换成它所需要的（不要指望最初的标记是任何不同的）。
这里的代码可以在这里find，它是在SafeSurf部分下，我想显示一些关于选项的含义翻转选项的帮助。 目前只能“事后”展示，给用户一些前期的帮助是有好处的。
欣赏这不是件容易的事情，而且可能需要创造一些东西 – 所以奖金将会颁发给最完整的解决scheme，或者是让我最接近我所能创造的解决scheme的具体钩子。
从这个问题出现的两年来，其他浏览器已经赶上了（至less在Windows上…不知道其他浏览器）。 您可以在选项标签上设置“标题”属性：
<option value="" title="Tooltip">Some option</option>
这在Chrome 8，IE 9（及其8＆7模式），Firefox 3.6，RockMelt 16（基于Chromium）全部在Windows 7
如果增加可见选项的数量，以下内容可能适用于您：
<html> <head> <title>Select Option Tooltip Test</title> <script> function showIETooltip(e){ if(!e){var e = window.event;} var obj = e.srcElement; var objHeight = obj.offsetHeight; var optionCount = obj.options.length; var eX = e.offsetX; var eY = e.offsetY; //vertical position within select will roughly give the moused over option... var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount)); var tooltip = document.getElementById('dvDiv'); tooltip.innerHTML = obj.options[hoverOptionIndex].title; mouseX=e.pageX?e.pageX:e.clientX; mouseY=e.pageY?e.pageY:e.clientY; tooltip.style.left=mouseX+10; tooltip.style.top=mouseY; tooltip.style.display = 'block'; var frm = document.getElementById("frm"); frm.style.left = tooltip.style.left; frm.style.top = tooltip.style.top; frm.style.height = tooltip.offsetHeight; frm.style.width = tooltip.offsetWidth; frm.style.display = "block"; } function hideIETooltip(e){ var tooltip = document.getElementById('dvDiv'); var iFrm = document.getElementById('frm'); tooltip.innerHTML = ''; tooltip.style.display = 'none'; iFrm.style.display = 'none'; } </script> </head> <body> <select onmousemove="showIETooltip();" onmouseout="hideIETooltip();" size="10"> <option title="Option #1" value="1">Option #1</option> <option title="Option #2" value="2">Option #2</option> <option title="Option #3" value="3">Option #3</option> <option title="Option #4" value="4">Option #4</option> <option title="Option #5" value="5">Option #5</option> <option title="Option #6" value="6">Option #6</option> <option title="Option #7" value="7">Option #7</option> <option title="Option #8" value="8">Option #8</option> <option title="Option #9" value="9">Option #9</option> <option title="Option #10" value="10">Option #10</option> </select> <div id="dvDiv" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;z-index:999;"></div> <iframe id="frm" style="display:none;position:absolute;z-index:998"></iframe> </body> </html>
我只是试图在Chrome上做这个：
var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});
然而，hoverinput永远不会触发…所以你将无法使用标准select完成这一切。 你可以通过一些非标准的方式来达到这个目的：
- 您可以使用看起来像下拉菜单的收音机框来伪造一个select框。 因此，例如，一个无线电盒子绝对定位，不透明度设置为0放置在假装成为选项的样式框上。
- 或者，您可以使用纯JavaScript，并有一系列的框，并添加javascript onclick事件来重新创build自己的保pipe箱 – 所以你会更新一个隐藏的价值与任何一个盒子被点击使用JavaScript。
- 或者使用已经存在的非标准库之一。 （如果有的话）？
我不认为这是可能的跨所有浏览器。
W3Schools报告说， 选项事件存在于所有的浏览器中，但是在设置这个testing演示之后 。 我只能得到它的Firefox（不是Chrome或IE），我没有在其他浏览器上testing过。
Firefox也允许mouseenter和mouseleave，但是这并不在w3schools页面上报告。
更新：老实说，从看你提供的示例代码，我甚至不会使用select框。 我认为它会看起来更好用滑块 。 我已经更新了你的演示 。 我必须对您的评级对象（添加级别号码）和safesurf选项卡进行一些小的更改。 但是我完全保留了其他一切。
至less在Firefox上，你可以在选项标签上设置“标题”属性：
<option value="" title="Tooltip">Some option</option>
为什么要使用下拉菜单？ 用户看到您的解释性文字的唯一方法就是盲目地在一个选项上徘徊。
我认为最好是使用一个单选button组，并在每个项目的旁边放一个工具提示图标，指示附加信息，以及在select之后显示它（就像你现在有的那样）。
我意识到这并不能完全解决你的问题，但是我并没有看到为了僵化而臭名昭着的html元素的问题，因为你可以使用一个更适合的元素。
我不相信你可以用标准的<select>元素来实现这个function。
我会build议使用这种方式。
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
它的基本版本不会占用太多的空间，您可以轻松地将mouseover事件绑定到子项目以显示一个很好的工具提示。
希望这有助于思南。
