下拉式工具提示
3.00/5 (5投票s)
为 HTML 下拉框（SELECT/COMBO）元素提供自定义工具提示支持。
引言
Windows 上的 IE 不支持 Tooltip 属性，甚至不支持 <select> 控件上的 Title 属性。这是因为它们为 <select> 标签创建了一个单独的窗口，该窗口位于浏览器窗口的其余信息之上。（可以把它看作是另一层。）工具提示引擎实际上位于主窗口层上，因此如果工具提示要显示，它将出现在 <select> 元素之后。这种分层行为也会破坏定位在 <select> 标签上的弹出窗口，因为它们始终位于主窗口层上！
背景
所有其他元素都支持工具提示，但下拉框不支持。我尝试使用简单的 JavaScript 添加此支持。
使用代码
为了支持下拉框的工具提示，您需要在 HTML 或 ASP 文件中包含 dropdown.js 文件。
<head>
<script type="text/javascript" src="dropdown.js"></script>
</head>
然后在文档的 body 标签下声明一个名为 ptoolTip 的 iFrame 对象。我们需要一个 iFrame 对象来确保工具提示下方的元素不会穿透显示。
<BODY><iframe id="ptoolTip" ondrop="return false;"
style="Z-INDEX: 101;LEFT: -210px; POSITION: absolute; TOP: 40px;"
frameBorder="0" scrolling="no">
</iframe></BODY>
然后只需将 onmouseover 和 onmouseout 事件分配给您的 SELECT 标签即可
<BODY>
<iframe id="ptoolTip" ondrop="return false;"
style="Z-INDEX: 101;LEFT: -210px; POSITION: absolute; TOP: 40px;"
frameBorder="0" scrolling="no">
</iframe>
<form>
<select name="State"
onmouseover="return showTip(this,'Select a state from the list where you currently residing')"
onmouseout="return hideText()"></select>
<form>
</BODY>
现在，如果将鼠标移动到下拉框上，浏览器将显示“选择状态...”作为下拉框的工具提示。如果您离开该字段或经过一段时间后，它将隐藏工具提示。showTip 函数首先计算左侧和顶部位置，以放置 iFrame，即下拉框的右下角。如果 SELECT 对象的父级是 DIV 或 SPAN，则需要根据父级层次结构计算偏移左侧和顶部。基本上，您需要将父级的偏移左侧和偏移顶部相加，以获得确切的绝对位置。然后，我们创建一个 DIV 元素并将工具提示分配给该元素。所有样式都是 DIV 对象的一部分，但可以放在 CSS 文件中。它假定 10Px 字体并计算默认宽度；这可能不需要，因为我们使用 DIV 的宽度和高度重新分配 iFrame 的宽度和高度，以便 iFrame 的尺寸足以显示工具提示。最后，它设置一个计时器，以便自动关闭工具提示。所有这些都可以参数化，以便根据要求进行配置。
关注点
IE 7 将所选项目的显示值存储在 title 属性中，并且可能会显示我们的自定义提示和所选提示；为了覆盖它，我们可能需要取消该事件。与其直接调用 showTip，不如可能需要为 onmouseover 事件分配 show("")。
function show(tip){
ele = event.srcElement;
if(tip != null && tip.length > 0) {
hideText();
ele.title="";
showTip(ele,tip);
event.cancelBubble= true;
return false;
}
}
<BODY>
<iframe id="ptoolTip" ondrop="return false;"
style="Z-INDEX: 101;LEFT: -210px; POSITION: absolute; TOP: 40px;"
frameBorder="0" scrolling="no">
</iframe>
<form>
<select name="State"
onmouseover="return show('Select a state from the list " +
"where you currently residing')"
onmouseout="return hideText()"></select>
<form>
</BODY>