How to add tooltip to td in a table

Can someone give me an example of adding a tooltip whenever I hover a td in a table.

The content of the tooltip must come from database records.

Example:

If I hover A na开发者_开发知识库me on a table.. the tooltip must display his/her information.

Use the title attribute:

<table>
    <tr>
        <td>
            <a href="#" title="John Smith lives in New York."> John Smith </a>
        </td>
    </tr>
</table>

Live demo: http://jsfiddle.net/GpU5f/

You'll get a tooltip on hover if you add 'title="whatever"' to the <td>:

<tr><td title="whatever">hover here to see "whatever" in a tooltip</td>

Where the title content comes from is a different and perhaps more difficult story, but perhaps you can arrange for the program code that is providing the cell's innerText to do the same for the cell's title=....

HTH

-- pete

since the original question was tagged jquery and none of the examples mention this (however trivial), it's just a matter of

$(tdSelector).attr('title', titleText);

<?php
    $test = "Test"
?>

<table>
    <tr>
        <td title="<?php echo $test; ?>">Hi there</td>
    </tr>
</table>

What ever there in the title attribute display as tooltip.

<tr><td title="whatever">hover here to see "whatever" in a tooltip</td>

I am getting tooltip what ever getting from value in order.productTitle.

<td title="{{order.productTitle}}">{{order.productTitle}}</td>

In angular.js it can work like this:-

<table>
<tr ng-repeat="data in list">
<td  class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#tableRoceMovement"data-original-title="{{data.value}}" title="{{data.value}}"data-placement="bottom" data-html="true" onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.value}}</td>
</tr>
</table>