title: jquery tooltip showing a hidden div element?
body: <p>I am trying to have tooltip for my personal website <a href="http://www.stacked.in" rel="nofollow noreferrer">http://www.stacked.in</a>. 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 
  <a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" rel="nofollow noreferrer">http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/</a> for this purpose. Even if I get the some other jquery-plugin, I would be happy.  </p>
  
  <p>Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.</p>
  
  <pre><code>#tooltip-content {
   display:none;
   width:250px;
  }
  </code></pre>
  
  <p>here is HTML code..</p>
  
  <pre><code>&lt;div id="widget" class="span-8  "  &gt;
  
  &lt;h2&gt;&lt;a href=""&gt;Example.com&lt;/a&gt;&lt;/h2&gt;
  &lt;ul&gt;
              &lt;li&gt;&lt;h3&gt;&lt;a href="example.com"&gt;Example News 1&lt;/a&gt;&lt;/h3&gt;
          &lt;div id="tooltip-content"&gt;              
              &lt;div class="published"&gt;Thu Jul 8, 2010&lt;/div&gt;
              &lt;div class="content"&gt;
                  This detail news 1 shown only on tooltip.. 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;h3&gt;&lt;a href="example.com"&gt;Example News 2&lt;/a&gt;&lt;/h3&gt;
          &lt;div id="tooltip-content"&gt;              
              &lt;div class="published"&gt;Thu Jul 8, 2010&lt;/div&gt;
              &lt;div class="content"&gt;
                  This detail news 2 shown only on tooltip.. 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/li&gt;               
     &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>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. <a href="http://code.google.com/p/jquery-very-simple-tooltip/" rel="nofollow noreferrer">http://code.google.com/p/jquery-very-simple-tooltip/</a> comes near to solution but it requires initialization for all the tooltip notes.</p>