Met*_*ark 63 html jquery tooltip jquery-plugins
使用纯HTML或jQuery辅助JavaScript,如何在各个<option>元素上显示工具提示以帮助决策过程(没有足够的空间进行不同类型的控制,并且需要一些帮助).
这可以通过插件或类似方式完成吗？
我为jQuery尝试了一些工具提示插件但没有成功(包括名为Tooltip的插件).
该解决方案应该:
<select>包装<option>元素.因此,如果解决方案想要使用其他标签,则应将这些元素动态转换为所需的元素(并且不要期望初始标记有任何不同).
这里的代码可以在这里找到,它位于SafeSurf部分下面,我想在选项翻转时显示一些关于选项含义的帮助.目前它只能在"事后"显示,并且对用户的一些前期帮助将是有益的.
感谢这并不容易,并且可能需要创建一些东西 - 所以赏金将被授予最完整的解决方案或特定的钩子,这使我最接近我可以创建的解决方案.
Jac*_*bit 90
在问到这个问题后的2年里,其他浏览器似乎已经赶上了(至少在Windows上......不确定其他浏览器).您可以在选项标记上设置"title"属性:
<option value="" title="Tooltip">Some option</option>
所有在Windows 7上都适用于Chrome 20,IE 9(及其8和7模式),Firefox 3.6,RockMelt 16(基于Chromium)
pfe*_*ate 10
如果增加可见选项的数量,则以下内容可能对您有用:
<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>