javascript - 显示隐藏的 div 元素的 jquery 工具提示?

标签 javascript jquery html css tooltip

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

请注意,tooltip-content div 内部 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/接近解决方案,但它需要对所有工具提示注释进行初始化。

最佳答案

我从 http://flowplayer.org/tools/tooltip/index.html 找到了 jQuery 工具有一个很好的工具提示。您可以在元素上使用标题属性,或使用下一个 DOM 节点作为非标题元素的工具提示。

非常灵活,我相信它会适本地满足您的需求。祝你好运!

关于javascript - 显示隐藏的 div 元素的 jquery 工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3198388/

相关文章:

jQuery : Test if element is visible on screen

javascript - jQuery 不能正确地乘以数字

jQuery() 对象可以保存非 DOM 对象吗?

javascript - 单击下一个或上一个按钮时多次刷新页面

javascript - 使用 CKEditor 以 HTML 格式发送电子邮件

php - 用 PHP 替换图像标签周围的链接

javascript - Mongoose Delete 和 Express app.delete 有什么区别

javascript - 为什么 d3.histogram 会合并此图表的最后两个 bin?

javascript - JQuery animate 总是删除显示 :none and adds display:block to inline css

javascript - 显示隐藏按钮,至少选中一个复选框