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

你好再次親愛的專家，我仍然有問題讓工具提示正常工作。如何獲取工具提示懸停在texbox上？

下面的代碼工作正常，據顯示工具提示。

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

我們想的是讓在消息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>

來源

2011-10-03 Chidi Okeh

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

你應該做的另一件事是把它放在一個元素與position: relative集：

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

這將創建一個座標系它（即：bottom: 20px將轉換從相對父的底部20像素）：

.relative { 
    position: relative; 
} 

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

}

它在行動Here's a demo。

來源

2011-10-03 00:35:45 Pat

謝謝大家最親愛的專家。帕特的解決方案對我來說非常合適。願你們得到無限的祝福，爲你提供幫助。 –

+1好的答案，如此簡單而優雅。 –

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

你可以在jsfiddle中顯示問題？

來源

2011-10-03 00:31:05 mowwwalker

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

30 Stylish jQuery Tooltip Plugins For Catchy Designs

來源

2011-10-03 00:32:03

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

回答

相關問題