jquery tooltip showing a hidden div element?

Question

I am trying to have tooltip for my personal website http://www.stacked.in . when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.

Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.

#tooltip-content {
 display:none;
 width:250px;
}

here is HTML code..

<div id="widget" class="span-8  "  >

<h2><a href="">Example.com</a></h2>
<ul>
            <li><h3><a href="example.com">Example News 1</a></h3>
        <div id="tooltip-content">              
            <div class="published">Thu Jul 8, 2010</div>
            <div class="content">
                This detail news 1 shown only on tooltip.. 
            </div>
        </div>
        </li>

        <li><h3><a href="example.com">Example News 2</a></h3>
        <div id="tooltip-content">              
            <div class="published">Thu Jul 8, 2010</div>
            <div class="content">
                This detail news 2 shown only on tooltip.. 
            </div>
        </div>
        </li>               
   </ul>

There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.

Answer 1

I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.

Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!