jquery 工具提示显示隐藏的 div 元素？答案

【问题标题】：jquery tooltip showing a hidden div element?jquery 工具提示显示隐藏的 div 元素？
【发布时间】：2010-07-07 20:06:02
【问题描述】：

我正在尝试为我的个人网站http://www.stacked.in 提供工具提示。当我在链接上移动鼠标时，我希望显示工具提示。工具提示显示内容已在 html 页面中作为 div 元素提供，但它是隐藏的。我希望仅当我将鼠标移到链接上时才显示工具提示。我用jquery和jquery插件 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ 用于此目的。即使我得到其他一些 jquery 插件，我也会很高兴。

请注意，tooltip-content div inner html 不会显示。 Tooltip 应该获取元素并显示它。

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

这里是 HTML 代码..

<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>

会有超过 100 个元素需要工具提示。有没有更好的工具或方法来处理这个问题？如果你给我代码示例，我会很感激你的。我已经搜索了很多方法。 http://code.google.com/p/jquery-very-simple-tooltip/ 接近解决方案，但它需要对所有工具提示注释进行初始化。

【问题讨论】：

标签： javascript jquery html css tooltip

【解决方案1】：

我发现来自http://flowplayer.org/tools/tooltip/index.html 的jQuery 工具有一个很好的工具提示。您可以在元素上使用 title 属性，或使用下一个 DOM 节点作为无标题元素的工具提示。

非常灵活，我相信它会适当地满足您的需求。祝你好运！

【讨论】：