javascript - qtip2 气球和 php 表 : different balloon content for each row?

Question

我正在尝试使用 qtip2 jquery 插件制作带有内容的小提示框/气球。这是他们的 .js 和 .css 文件:

http://qtip2.com/download

我希望它能够处理由来自 mysql 的 php 填充的表。我正在做这样的表:

 <tbody>
    <?php while($row = MySQL_fetch_array($result)): ?>
        <tr>
            <td title="lname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['last_name'])); ?>
                </div>
            </td>
            <td title="fname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['first_name'])); ?>
                </div>
            </td>    
            <td width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['u_name'])); ?>
                </div>
            </td>  
            <td width="100px">
                <div style="width:150px; overflow:hidden;">
                    <?php echo(htmlentities($row['skype_id'])); ?>
                </div>
            </td>
       </tr>
    <?php endwhile; ?>
</tbody>

所有丑陋的 div 都是为了让它看起来更整齐。无论如何...这是工具提示的脚本:

        <script>$('td[title]').qtip({
                    show:'click',
                    hide:'unfocus',
                    content: {
                        text: "<?php echo(htmlentities($row['last_name'])); ?>"
                    }

                }); 
        </script>

问题是...我只能让它为每个带有“标题”的单元格显示相同的该死的内容。我希望气球显示特定于每个 $row 的内容。知道如何实现吗？

Answer 1

根据 documentation :

You can also specify an function that returns the content, which will be run on each consecutive show event. This function can return both static textual content (text or HTML), or a Deferred object (see below) The function is executed with it's scope as the target element, along with both an event and api argument(s) respectively.

所以你可以这样做:

content: {
    text: function() {return $(this).closest("tr").find("[title=lname]").text();}
}

我们的想法是，从我们知道是 td[title] 的目标元素范围 (this) 开始，以某种方式生成工具提示的文本。由于标记中该文本的唯一实例位于 td[title=lname] 内，代码会找到它并返回其文本。