How to display information returned by ajax call in a tooltip

I have created a JSP file which returns the information required from database. I have also written code which will make ajax call to this jsp file to retrieve the information. But I am not getting any good or free Tooltip libraries to know how to put this information into 开发者_运维问答tooltip. Kindly suggest good and free libraries of tooltip in javascript( I am not good in jquery I know its powerful but I need to learn and change my whole code).

Problem: I need to show this tool tip contents on hovering the mouse on different options of listview. (each option of listview will have different infrormation) On moving mouse on each option should send an ajax call to the JSP page and get the intended calls back into the tooltip) I now the code of javascript to make ajax calls and get contents from JSP file the only problem is which tootip libraries to use and how to use it for each option of listview. Kindly suggest.

---

qTIP will do the trick. Get the library. Configure it for the tags that you need. The rest could follow like this:

1. Get the AJAX response
2. Use javascript to modify the title attribute. Something like

document.getElementById(id).setAttribute('title', 'Ajax response here');

The library would do the rest for you.

To circumvent the problem of the AJAX call you can use this check:

//on mouseover call for an AJAX function and check this
if(!document.getElemenyById(id).getAttribute){
    //the title is not set, use Ajax to retrive it an set it
    tooltip.init(); //this is crucial for the tooltip to work
}

Edit: Inside the library search for var qTipTag = "a,label,input"; and change it to var qTipTag = "li,a,label,input";. This would start the tooltip engine for the tags you want.

you can see it working here http://jsfiddle.net/DarkThrone/gu6T2/5/