Question

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

Answer 1

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.