jQuery 如何在 HTML“选项”标签上显示工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3249591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display a tooltip on an HTML "option" tag?
提问by Metalshark
Either using plain HTML or jQuery assisted JavaScript, how do you display tooltips on individual <option>elements to aid the decision process (there is not enough room for a different kind of control and some help will be needed).
使用纯 HTML 或 jQuery 辅助 JavaScript，您如何在单个<option>元素上显示工具提示以帮助决策过程（没有足够的空间进行不同类型的控制，需要一些帮助）。
Can this be done though a plug-in or similar?
这可以通过插件或类似软件来完成吗？
I have tried a few tooltip plugins for jQuery with no success (including the one called Tooltip).
我尝试了一些 jQuery 工具提示插件，但都没有成功（包括一个叫做 Tooltip 的插件）。
This solution should:
此解决方案应：
- work in IE, WebKit as well as Gecko;
- utilizing standard
<select>wrapped<option>elements.
- 在 IE、WebKit 和 Gecko 中工作；
- 使用标准的
<select>包裹<option>元素。
So if the solution wants to use other tags it should convert those elements into what it needs dynamically (and not expect the initial mark-up to be any different).
因此，如果解决方案想要使用其他标签，它应该将这些元素动态转换为它需要的内容（并且不期望初始标记有任何不同）。
The code for this can be found here, it is under the SafeSurf section, where I want to display some help on rollover of the options as to the meaning of the choices. At present it can only be displayed "after the fact" and some upfront help for the user would be beneficial.
可以在此处找到此代码，它位于 SafeSurf 部分下，我想在此处显示有关选项翻转的一些帮助，以了解选项的含义。目前它只能“事后”显示，对用户的一些前期帮助将是有益的。
Appreciate that this is not easy and that something will probably need to be created - so the bounty will be awarded to the most complete solution or the specific hook that lands me closest to a solution I can create.
意识到这并不容易，并且可能需要创建一些东西 - 因此赏金将授予最完整的解决方案或使我最接近我可以创建的解决方案的特定钩子。
回答by Hyman.R.Abbit
It seems in the 2 years since this was asked, the other browsers have caught up (at least on Windows... not sure about others). You can set a "title" attribute on the option tag:
似乎在被问到这个问题后的 2 年里，其他浏览器已经赶上了（至少在 Windows 上......不确定其他浏览器）。您可以在选项标签上设置“标题”属性：
<option value="" title="Tooltip">Some option</option>
<option value="" title="Tooltip">Some option</option>
This worked in Chrome 20, IE 9 (and its 8 & 7 modes), Firefox 3.6, RockMelt 16 (Chromium based) all on Windows 7
这适用于 Windows 7 上的 Chrome 20、IE 9（及其 8 和 7 模式）、Firefox 3.6、RockMelt 16（基于 Chromium）
回答by pferate
If increasing the number of visible options is available, the following might work for you:
如果可以增加可见选项的数量，以下方法可能对您有用：
<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>
回答by balupton
I just tried doing this on Chrome:
我只是尝试在 Chrome 上执行此操作：
var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});
However, the hover enter never fires... So you wouldn't be able to do this at all using the standard select. You could achieve this though through some non standard ways:
但是，悬停输入永远不会触发......因此您根本无法使用标准选择来执行此操作。您可以通过一些非标准方式实现这一点：
- You could fake a select box by using radio boxes that look like dropdowns. So for example, have a radio box absolute positioned and opacity set to 0 placed over the styled box that is pretending to be the option.
- Or you could use pure javascript and have a series of boxes and adding javascript onclick events to recreate the dropbox yourself - so you will update a hidden value with whichever box was clicked using javascript.
- Or use one of the non standard libraries already out there. (If there are any?)
- 您可以使用看起来像下拉菜单的单选框来伪造一个选择框。因此，例如，将单选框绝对定位并将不透明度设置为 0 放置在假装是选项的样式框上。
- 或者您可以使用纯 javascript 并拥有一系列框并添加 javascript onclick 事件来自己重新创建保管箱 - 因此您将使用使用 javascript 单击的框更新隐藏值。
- 或者使用已经存在的非标准库之一。（如果有的话？）
回答by Zaahid
At least on firefox, you can set a "title" attribute on the option tag:
至少在 Firefox 上，您可以在选项标签上设置“标题”属性：
<option value="" title="Tooltip">Some option</option>
<option value="" title="Tooltip">Some option</option>
回答by Mottie
I don't think this would be possible to do across all browsers.
我认为这不可能在所有浏览器中进行。
W3Schools reports that the option eventsexist in all browsers, but after setting up this test demo. I can only get it to work for Firefox (not Chrome or IE), I haven't tested it on other browsers.
W3Schools 报告说所有浏览器中都存在选项事件，但在设置此测试演示后。我只能让它在 Firefox（不是 Chrome 或 IE）上工作，我没有在其他浏览器上测试过。
Firefox also allows mouseenter and mouseleave but this is not reported on the w3schools page.
Firefox 还允许 mouseenter 和 mouseleave ，但这在 w3schools 页面上没有报告。
Update: Honestly, from looking at the example code you provided, I wouldn't even use a select box. I think it would look nicer with a slider. I've updated your demo. I had to make a few minor changes to your ratings object (adding a level number) and the safesurf tab. But I left pretty much everything else intact.
更新：老实说，从查看您提供的示例代码来看，我什至不会使用选择框。我认为带有滑块会更好看。我已经更新了你的演示。我不得不对您的评级对象（添加级别编号）和安全冲浪选项卡进行一些小的更改。但我几乎把其他所有东西都完好无损。
回答by Chris Fletcher
Why use a dropdown at all? The only way the user will see your explanatory text is by blindly hovering over one of the options.
为什么要使用下拉菜单？用户看到您的解释性文本的唯一方法是盲目地将鼠标悬停在其中一个选项上。
I think it would be preferable to use a radio button group, and next to each item, put a tooltip icon indicating additional information, as well as displaying it after selection (like you currently have it).
我认为最好使用单选按钮组，并在每个项目旁边放置一个指示附加信息的工具提示图标，并在选择后显示它（就像您目前拥有的那样）。
I realize this doesn't exactly solve your problem, but I don't see the point in struggling with an html element that's notorious for its inflexibility when you could just use one that's better suited in the first place.
我意识到这并不能完全解决您的问题，但是当您首先可以使用更适合的元素时，我不认为与以不灵活而臭名昭著的 html 元素斗争的意义。
回答by Sinan
I don't believe that you can achieve this functionality with standard <select>element.
我不相信您可以使用标准<select>元素实现此功能。
What i would suggest is to use such way.
我的建议是使用这种方式。
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
The basic version of it won't take too much space and you can easily bind mouseoverevents to sub items to show a nice tooltip.
它的基本版本不会占用太多空间，您可以轻松地将mouseover事件绑定到子项以显示一个不错的工具提示。
Hope this helps, Sinan.
希望这有帮助，思南。
