jQuery工具提示插件没有制作工具提示

时间:2012-02-17 03:14:00

标签: jquery jqgrid tooltip

我没有运气工具提示在Firefox上工作。所以我决定尝试一下jQuery工具提示插件。但它不适合我。

通过用户操作将图像插入到html中。状态变量保存字符串,下面的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>

1 个答案:

答案 0 :(得分:0)

修正后的答案:

试试这个

<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上时,它就会被绑定。或者每次添加内容时都强制它。

还可以看到此链接: http://flowplayer.org/tools/demos/tooltip/index.html