qtip2 balloons and php tables: different balloon content for each row?

Question

I'm trying to use the qtip2 jquery plugin to make little tooptips/balloons with content inside them. Here's their .js and .css files:

http://qtip2.com/download

I want it to work with tables that are populated by php from mysql. I'm doing the table like this:

 <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>

all the ugly divs are there to make it look more aligned. anyway...here's the script for the tooltip:

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

                }); 
        </script>

The problem is...I can only get it to display the same friggin content for every cell with 'title'. I want the balloon to display content specific to each $row. Any idea how I can accomplish this?

Answer 1

As per the 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.

So you can do this:

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

The idea is, starting from the target element scope (this) which we know is a td[title], to somehow produce the text for the tooltip. Since the only instance of that text in your markup is inside the td[title=lname], the code finds that and returns its text.