Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add tooltip to td in a table

Tags:

html

jquery

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.

like image 913
Belmark Avatar asked Feb 14 '11 17:02

Belmark


People also ask

How do I add a tooltip to TD?

The title attribute on a <td> tag adds a tooltip with title text to the table data cell. Hovering the mouse over the table cell will display the tooltip.

How do I add a tooltip to a table?

Create a HTML table. Create a <span> element in the table cell in which we want to add a tooltip. Initially set the display: none of the <span> element. Whenever the user hovers over this particular element, Just change the property to display: block.

How do I add a tooltip to an element?

Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .


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

like image 69
Šime Vidas Avatar answered Sep 19 '22 01:09

Šime Vidas