Creating a simple JQuery tooltip?

Question

Has anybody here got any experience in creating simple tooptips using JQuery?

I have created a table:

<tr id="mon_Section">  
  <td id="day_Title">Monday</td>`    
  <td id="mon_Row" onmousemove="calculate_Time(event)"></td>
</tr>`

the function "calculate_Time" will be called and this gets the X position of the mouse cursor and from the value, uses IF and ELSE-IF statements to calculate the values of other variables i have created:

var mon_Pos; var hour; var minute; var orig; var myxpos;

function calculate_Time(event) {
  myxpos = event.pageX;
  myxpos = myxpos-194;

  if (myxpos<60) {  
    orig = myxpos;
    minute = myxpos;
    hour = 07;
  } else if (myxpos>=60 && myxpos<120) {
    orig = myxpos;
    minute=myxpos-60;
    hour=08;
  }
}

How do i go about creating a stylized tooltip containing the Hour and Minute variables that i created, I need the tooltip to be updated everytime the X position of the cursor changes. I know that with myxpos variable does change whenever the mouse is moved because i tried it out using an alert(myxpos) and as expected, if the mouse moves, a new alert box popups with a new value. I just cant work out how to place that value in a tooltip?

Answer 1

Simplest answer: Don't redo what has already been done and done well. Both support callbacks that can be used to modify the text being displayed.

Answer 2

Check out this article.. it's not really a tutorial, but you can download the code and it is very easy to understand.