Hello there, Experts, I am still encountering some difficulties with the tooltips feature.
The code snippet below functions properly in displaying the tooltips.
However, a major issue arises where it causes the textbox to expand, resulting in misalignment with other textboxes.
Our goal is to have the tooltip message hover over the textbox without obstructing it, allowing users to continue typing seamlessly.
Is there a way to tweak the existing code to achieve this desired outcome?
Your assistance is greatly appreciated.
CSS Styling
<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;
}
Textbox and Tooltip Integration
<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 will be displayed here.</div>