如何在HTML "option“标记上显示工具提示？
无论是使用普通的超文本标记语言还是jQuery辅助的JavaScript，如何在单个<option>元素上显示工具提示以帮助决策过程(没有足够的空间支持不同类型的控件，需要一些帮助)。
这可以通过插件或类似的方式来完成吗？
我已经尝试了一些用于jQuery的工具提示插件，但没有成功(包括一个名为tooltip的插件)。
此解决方案应：
- 适用于IE、WebKit以及Gecko;
- utilizing标准
<select>包装的<option>elements。
因此，如果解决方案想要使用其他标记，它应该动态地将这些元素转换为它需要的元素(不要期望初始标记会有任何不同)。
这方面的代码可以在here中找到，它在SafeSurf部分下，我想在这里显示一些关于选项滚动的帮助，以了解选项的含义。目前，它只能在“事后”显示，一些对用户的前期帮助将是有益的。
意识到这并不容易，而且可能需要创建一些东西-所以赏金将被授予最完整的解决方案或最接近我所能创建的解决方案的特定钩子。
回答 7
Stack Overflow用户
发布于 2012-07-07 01:50:00
自从这个问题提出以来的两年里，其他浏览器似乎已经赶上了(至少在Windows上是这样)。不确定其他人)。您可以在选项标签上设置"title“属性：
<option value="" title="Tooltip">Some option</option>
这在Chrome20、IE9(及其8和7模式)、Firefox3.6、RockMelt 16 (基于Chromium)上都有效
Stack Overflow用户
发布于 2010-07-23 09:41:19
如果可以增加可见选项的数量，则以下选项可能适用于您：
<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>Stack Overflow用户
发布于 2010-07-18 22:04:46
我只是试着在Chrome上这样做：
var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});然而，悬停回车永远不会触发...因此，使用标准select根本无法做到这一点。你可以通过一些非标准的方法来实现这一点：
- 您可以通过使用看起来像下拉框的单选框来伪造选择框。例如，有一个绝对定位的单选框，不透明度设置为0，放置在样式化的框上，假装是选项。
- 或者你可以使用纯javascript，有一系列的框，并添加javascript onclick事件来自己重新创建拖放框-这样你就可以使用javascript.
- 来更新隐藏的值，或者使用已经存在的非标准库之一。(如果有？)
https://stackoverflow.com/questions/3249591
复制相似问题