javascript - How can I get tooltip to hover on top of texboxes? - Stack Overflow

admin管理员组

文章数量:1393083

Hello again dearest Experts, I am still having issues getting tooltips to work correctly.

The code below works correctly as far displaying the tooltips.

The big issue is that it expands the textbox, making other textboxes lose alignment.

What we would like to is to have the message in the tooltop hover on top of the textbox but not obscure it. This way, users can still type into it.

Can the code I have below be modified to help me acplish this?

Many thanks.

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

Then textbox and tooltip.

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

Hello again dearest Experts, I am still having issues getting tooltips to work correctly.

The code below works correctly as far displaying the tooltips.

The big issue is that it expands the textbox, making other textboxes lose alignment.

What we would like to is to have the message in the tooltop hover on top of the textbox but not obscure it. This way, users can still type into it.

Can the code I have below be modified to help me acplish this?

Many thanks.

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

Then textbox and tooltip.

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

• javascript
• asp

Share Improve this question Follow asked Oct 3, 2011 at 0:27 Chidi OkehChidi Okeh 1,57799 gold badges3030 silver badges5050 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The key is to make your tooltip position: absolute. This way you'll have exact control over where it appears and it won't affect the layout of any other elements.

The other thing you should do it put it in an element with position: relative set:

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

This will create the coordinate system for it (i.e.: bottom: 20px will translate to 20px from the bottom of the relative parent):

.relative {
    position: relative;
}

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

}

Here's a demo of it in action.

I remend you use a jQuery plugin, there are tons of them:

30 Stylish jQuery Tooltip Plugins For Catchy Designs

edit: sorry, that was a plete brain fart. I need more sleep. display:absolute won't do anything, it's position:absolute

Can you show the problem in the jsfiddle?

本文标签： javascriptHow can I get tooltip to hover on top of texboxesStack Overflow