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设置的元素中：

<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;

}

Here's a demo它的实际效果。

Answer 2

编辑抱歉，这是一个完整的大脑放屁。我需要更多的睡眠。 display:absolute不会做任何事情，position:absolute

你能在jsfiddle中显示问题吗？

Answer 3

我建议您使用jQuery插件，其中有很多：

30 Stylish jQuery Tooltip Plugins For Catchy Designs

如何将工具提示悬停在文本框顶部？

3 个答案: