Paris Polyzos' Blog

Here is a small recipe about making some things a little more beautiful using asp.net Validators and some javascript.

What do we need:

• ASP.NET Validators like RequiredFieldValidator
• jQuery
• jQuery Tooltip
• A nice tooltip image and some css

Container

This is where we store the tooltip info

<div class="tooltip"></div>

Images

You can use the following images, i think they are pretty:

	The image that will contain the tooltip to be displayed
	A warning icon that can be displayed whenever a validation occurs and on mouse over the tooltip will be displayed

CSS

We will create 3 classes:

• tooltip will handle the style of the tooltip:

  .tooltip
  {
  display: none;
  background: transparent url(../Images/validation/black_arrow.png);
  font-size: 12px;
  height: 70px;
  width: 160px;
  padding: 25px;
  color: #fff;
  z-index: 10000;
   }

• validate will be the base class for everything we want to validate

  .validate { }

• valid-no will have the style for the warning icon that is going to be triggered every time validation occurs.

  .valid-yes, .valid-no {
  background-position: top left;
  background-repeat: no-repeat;
  display: inline;
  padding: 1px 9px;
  margin: 0 1px 0 1px;
  }
  .valid-yes { background-image: url('../Images/validation/validYes.png'); }
  .valid-no { background-image: url('../Images/validation/validNo.png'); }

Javascript

Some javascript to trigger the tooltips all over our site

$(document).ready(function(){
    $('.validate').tooltip('.tooltip');
    $('.validate').append(' '); // this is done because doesn't display properly empty span.
});

Examples

Now you can use asp.net validators and trigger the tootlips using the CssClass=”validate valid-no” and Tooltip=”A tooltip goes here” properties.
Like for example:

<asp:TextBox ID="txtEmail" runat="server" />
<asp:RequiredFieldValidator ID="rfEmail" runat="server" ControlToValidate="txtEmail" CssClass="validate valid-no" ToolTip="Please fill in the email..." />

Result