如何將工具提示懸停在texbox上？

Question

你好再次親愛的專家，我仍然有問題讓工具提示正常工作。

下面的代碼可以正常顯示工具提示。

最大的問題是它擴展了文本框，使其他文本框失去了對齊。

我們希望將tooltop中的消息懸停在文本框的頂部但不會模糊它。 這樣，用戶仍然可以輸入它。

我可以修改下面的代碼來幫助我完成這項工作嗎？

非常感謝。

那個css

<style type="text/css">
div.activeToolTip 
{
 display:block;
 visibility:visible;
 background-color:#A1D40A;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 0.75em;
 line-height: 1.50em;
 font-weight:bold;
 color: #fff;
 border:1px solid black;
 filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
 width:200px;
 height:70px;
}
div.idleToolTip 
{
 display:none;
 visibility:hidden;
}

然后是文本框和工具提示。

 <asp:TableCell><asp:TextBox ID="instruct" onmouseover="document.getElementById('toolTipDiv').className='activeToolTip'" onmouseout="document.getElementById('toolTipDiv').className='idleToolTip'" runat="server" Width="75px"></asp:TextBox>
 <div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>

Answer 1

關鍵是要使你的工具提示position: absolute 。 這樣您就可以精確控制它出現的位置，並且不會影響任何其他元素的布局。

你要做的另一件事就是把它放在一個有position: relative的元素中position: relative集合：

<div class="relative">
    <input type="text" />
    <div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>
</div>

這將為它創建坐標系（即： bottom: 20px將從相對父級的底部轉換為20px）：

.relative {
    position: relative;
}

#toolTipDiv {
    position: absolute;
    bottom: 20px; 
    left: 0;

}

這是它的實際演示 。

Answer 2

編輯：對不起，這是一個完整的大腦放屁。 我需要更多的睡眠。 display:absolute不會做任何事情，它的position:absolute

你能在jsfiddle中顯示問題嗎？

Answer 3

我建議你使用一個jQuery插件，其中有很多：

30個時尚的jQuery工具提示插件適用於Catchy Designs