i am using "beassistance validation" for my form and using tooltip plugin and it work fine except that positioning.
please have a look at this link and i upload my form to get an idea what i am talking about.
what i want is:
if my validation fails i want to display the message after the tooltip icon, but its displaying the message before the tooltip icon. please see here
here is the .css i am using:
validation .css
#aspnetForm
{
width: 670px;
}
#aspnetForm label.error
{
margin-left: 10px;
width: auto;
display: inline;
}
form.cmxform
{
width: 50em;
}
em.error
{
background: url("Images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success
{
background: url("Images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
form.cmxform label.error
{
margin-left: auto;
width: 250px;
}
#aspnetForm label.error
{
background: url("Images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
#aspnetForm label.
checked
{
background: url("Images/checked.gif") no-repeat 0px 0px;
}
em.error
{
color: black;
}
#warning
{
display: none;
}
<asp:Label runat="server" ID='Label8' >Start Date:</asp:Label>
<asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox>
<a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!">
<img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a>
<p>
</p>
<asp:Label runat="server" ID='Label9' >End Date:</asp:Label>
<asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox>
<a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!">
<img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a>
tooltip.css
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
