2012-02-17 172 views
2

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

正在通过用户操作将图像插入到html中。状态变量包含字符串,下面的html部分(div class =“statusicons”...)是在insert和tooltip()函数运行后在萤火虫中看起来像的样子。 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> 

回答

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();}); 

这样每whther后的document.ready存在的图像,或者你强迫它在每一个你添加的东西时它会被绑定时间

看到这个链接也。 http://flowplayer.org/tools/demos/tooltip/index.html

+0

按照给定的要求,“用户操作将图像插入html中“。但是,即使您在文档加载时添加了此项,但在动态添加任何新图像时,它也不起作用。 – 2012-02-17 06:16:52

+0

我们不需要添加$(function(){});只需$('#davo img [title]')。tooltip();会做。 此外,我们需要使用新创建的元素,而不是“id”。 谢谢Pasha Immortals – 2012-02-17 07:33:09

+1

@Vanga Sasidhar:是的,如果你动态添加,你确实需要它。因为你需要强制它。 – 2012-02-19 20:10:20