jQuery 工具提示插件不制作工具提示

标签 jquery jqgrid tooltip

我没能在 Firefox 上获得工具提示。所以我决定尝试一下 jQuery 工具提示插件。但这对我不起作用。

图像正在通过用户操作插入到 html 中。 status 变量保存字符串,下面的 html 部分 (div class="statusicons"...) 是运行 insert 和 tooltip() 函数后在 firebug 中的样子。 tooltip() 不会以任何方式修改 html。但是,我没有收到“tooltip() 不是函数”的信息,因此我必须假设已找到代码插件。

<script src="/plugins/snap/jquery.tooltips.min.js" type="text/javascript"></script>
...
jQuery("#devinfo").jqGrid('setCell',id,'status',status);
$("#davo img[title]").tooltip();


<div class="statusicons" id="davo">
<img width="24" height="24" title="Drive not mounted" alt="Drive not mounted" src="/plugins/snap/images/mount2.png">
&nbsp;<img width="24" height="24" title="Drive not shared" alt="Drive not shared" src="/plugins/snap/images/share2.png">
&nbsp;<img width="24" height="24" title="Drive not busy" alt="Drive not busy" src="/plugins/snap/images/busy2.png">
&nbsp;<img width="24" height="24" title="Drive is spinning" alt="Drive is spinning" src="/plugins/snap/images/drive1.png">
&nbsp;<img width="24" height="24" title="Drive is precleared" alt="Drive is precleared" src="/plugins/snap/images/precleared1.png">
</div>

最佳答案

修改后的答案:

试试这个

页面的标题部分,如<head></head>标签使用样式表作为工具提示,并首先将其显示设置为无。

这是一个基于您提供的内容的小模型:

<html>
<head>
<style type="text/css">
.tooltip {
    display:none;
    background:transparent url(/images/some_image.jpg);
    font-size:12px;
    height:200px;
    width:300px;
    padding:25px;
    color:#fff; 
}
</style>
</head>
<body>
<script     
        type="text/javascript" 
        src="/jquery/jquery-latest.js" >
    </script>
    <script     
        type="text/javascript" 
        src="/jquery/jquery.tools.min.js" >
    </script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#davo img[title]").tooltip();
});
    </script>   
    <br /><br /><br /><br />
    <div class="statusicons" id="davo">
    <img width="100" height="100" id="haha" title="Drive not mounted" src="/images/some_image_2.jpg">
    </div>

</body>
</html>

现在:

由于您在将图像添加到页面的代码中动态地将图像添加到页面,因此您需要执行以下 JQuery 语句:

$(function(){$("#davo img[title]").tooltip();});

这样,无论图像是否存在于 document.ready 上,每次都会被绑定(bind),或者每次添加内容时都强制启用它。

另请参阅此链接: http://flowplayer.org/tools/demos/tooltip/index.html

关于jQuery 工具提示插件不制作工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9322371/

相关文章:

c++ - 如何自定义工具提示的外观? (C++ WinAPI)

php - 使用 AJAX 提交表单,将表单数据传递给 PHP,无需刷新页面

javascript - 如何防止查询字符串值可见

javascript - 如何将 Yii2 与 require.js 一起使用?

javascript - 未捕获的类型错误 : Cannot read property 'addEventListener' of null chrome-extension

javascript - 如何以编程方式触发 JqGrid 中特定网格行的单击事件

javascript - 在图像中显示鼠标悬停工具提示

java - Swing 中的工具提示

jquery - jqgrid中如何删除行

javascript - 是否有可能以当前排序的顺序跨多个页面获取所有 jqGrid 行?