我没有运气工具提示在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">
<img width="24" height="24" title="Drive not shared" alt="Drive not shared" src="/plugins/snap/images/share2.png">
<img width="24" height="24" title="Drive not busy" alt="Drive not busy" src="/plugins/snap/images/busy2.png">
<img width="24" height="24" title="Drive is spinning" alt="Drive is spinning" src="/plugins/snap/images/drive1.png">
<img width="24" height="24" title="Drive is precleared" alt="Drive is precleared" src="/plugins/snap/images/precleared1.png">
</div>
答案 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