Home » Html » How to add tooltip to td in a table

How to add tooltip to td in a table

Posted by: admin November 29, 2017 Leave a comment

Questions:

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 name on a table.. the tooltip must display his/her information.

Answers:

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/

Questions:
Answers:

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

Questions:
Answers:
<?php
    $test = "Test"
?>

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

Questions:
Answers:

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

Questions:
Answers:

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>