Question

所以我按照这个例子：http://www.ehow.com/how_10010263_put-php-code-tooltip.html 我正在构建一个jqgrid，在一列中我有标题的图像，我想成为工具提示（因为在一些浏览器中一段时间后图像标题消失）。所以在php中我使用它来安装图像：

 $image = "<div id='tooltip'>
               <img height='16' width='16' title='$image_title' 
               src='". base_url()."img/icons/Blue/Bubble5.png'>
           </div>";

然后我尝试在jquery中执行此操作：

$("#tooltip img[title]").tooltip();

然而没有效果。

任何想法我做错了什么？

编辑：这就是一个带有图像的单元格在jqgrid中的样子：

<div id="tooltip">
    <img width="16" height="16" src="path/img/icon/Blue/Bubble5.png" title="random test">
</div>

可能有问题，因为我有20行具有相同内容，只有标题不同。

我的进口商品：

<script src="<?php echo base_url(); ?>js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>js/i18n/grid.locale-si.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>js/jquery.cookie.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></script>
    <script src="<?php echo base_url(); ?>js/leadFunctions.js" type="text/javascript"></script> 
    <script src="<?php echo base_url(); ?>js/sorttable.js" type="text/javascript"></script> 
    <script src="<?php echo base_url(); ?>js/switcherFunctions.js" type="text/javascript"></script> 
    <script src="<?php echo base_url(); ?>js/jquery.colorbox.js" type="text/javascript"></script>

Answer 1

由于图片是<div>中的唯一内容，我建议您尝试在<img>标记中添加一个类。

<img class="TT" height='16' width='16' title='$image_title' 
           src='". base_url()."img/icons/Blue/Bubble5.png'>

然后你可以使用

$(".TT").tooltip();

这样，具有此类的每个图像标记都将应用工具提示并默认使用标题。

如果您更喜欢简单的方法，jqueryUI example页面上的示例显示您可以执行

$(document).tooltip();

然后页面上带有标题的每个项目都会有一个与之关联的工具提示。

编辑：更新版本后，您的初始解决方案可能会有效。

Answer 2

您必须使用foreach：

$("#tooltip").foreach(function(){
 $(this).find("img[title]").tooltip();
});

如果您有多个具有id工具提示或

的div

$("#tooltip").find("img[title]").foreach(function(){
 $(this).tooltip();
});

如果您在一个div#tooltip中有多个img。

从PHP添加工具提示到图像

2 个答案: