How to show error message with jquery tooltip?

Question

I am validating my controls in a form... if a control is empty i would like to show a jquery tooltip with that error msg.. Here is what i am doing...

if (document.getElementById("ctl00_ContentPlaceHolder1_ListDiscipline")
    .selectedIndex == -1) 
{
  document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = 
      "please select your Discipline";
  document.getElementById("ctl00_ContentPlaceHolder1_ListDiscipline").focus();
  return false;
}

and i would like to do like this,

if (document.getElementById("ctl00_ContentPlaceHolder1_ListDiscipline")
    .selectedIndex == -1) 
{
  // show tooltip besides the control with the error message...
  document.getElementById("ctl00_ContentPlaceHolder1_ListDiscipline").focus();
  return false;
}

Any suggestion...

Answer 1

Here you will find some useful plugins to make tooltips with jQuery

For example with qTip installed you can do something like this:

if (document.getElementById("ctl00_ContentPlaceHolder1_ListDiscipline")
.selectedIndex == -1) 
{
  $('#ctl00_ContentPlaceHolder1_ListDiscipline').qtip(
  {
    content: "please select your Discipline"
  });
  document.getElementById("ctl00_ContentPlaceHolder1_ListDiscipline").focus();
  return false;
}