How can I display a tooltip on an HTML file?

Question

I'm a HTML rookie and I'd appreciate your assistance.

On a given table that I made in HTML, I'd like to set some tooltip messages on certain cells.

a) Is that possible? If so - how to?

b) Does it mean I must use a web server or java script? My mission is to display a HTML page on a browser but there's no web server and I can't install a web server. All displayed data are in the file itself and I'd like to keep it simple.

Thank you

possible duplicate of [How to add a tooltip to a div](http://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div) — Quentin, Mar 14 '14 at 09:59
what you have tried? any sample of code or something, there is several ways to do this, it depends on your HTML css and data, either its dynamic or static etc..and also depends on events like hover, click etc, please elaborate more what exactly you want to achieve — Chandrakant, Mar 14 '14 at 10:01
Havn't tried yet. Have no idea. Firstly I'd like to know if that's possible at all. Thank you! — , Mar 14 '14 at 10:08

score 1 · Accepted Answer · answered Mar 14 '14 at 10:02

a. You can just add the title attribute in td element. Then when you hover over the table cell you will have a tooltip.

<td title='I am a tooltip'> My Text</td>

More info: http://www.w3schools.com/tags/att_global_title.asp

b. No you don't need to setup a web server

score 0 · Answer 2 · answered Mar 14 '14 at 10:01

0

You can use title attribute

<td title="Hey there">

answered Mar 14 '14 at 10:01

M Reza Saberi

7,134
9
47
76

score 0 · Answer 3 · answered Mar 14 '14 at 10:03

0

just add title attribute like that:

<input type="button" title="click me"/>

answered Mar 14 '14 at 10:03

knightsb

337
3
11

score 0 · Answer 4 · answered Mar 14 '14 at 10:05

Here i made a fiddle for you :)

http://fiddle.jshell.net/B2Cr9/

HTML:

<table>
    <tr>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
    </tr>
    <tr>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
        <td class="has-tootltip">Here you go<span class="tooltip">Hellooo</span></td>
    </tr>
</table>

CSS:

.has-tootltip {
    display:inline-block;
    position:relative;
    background-color:green;
}
.tooltip {
    display:none;
    position:absolute;
    left: 0;
    top: 100%;
    width: 300px;
    min-height:40px;
    z-index:10;
    background-color: yellow;
}
.has-tootltip:hover .tooltip {
    display: block;
}

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

If you want to use jQuery then you can try this for each td:

$(function(){ // doc ready
   $('table').find('td').each(function(){
       $(this).attr('title', $(this).text());
   });
});

This code loops through all your tds available in your table and then sets their text as a title which shows as a tooltip.

Demo

Note:

This code does not require any webserver to work, yet you have to have a reference to the jQuery library first.

score 0 · Answer 6 · answered Mar 14 '14 at 10:19

Simple css solution:

[html]

<table>
  <tr><td data-tooltip="I am cell 1">cell 1</td></tr>
  <tr><td data-tooltip="I am cell 2">cell 2</td></tr>
  <tr><td>no tooltip</td></tr>
</table>

[css]

[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    border: 1px solid #ddd;
    background: #fff;
    position: absolute;
    padding: 3px;
    margin-top: 0.5em;
}

See this jsbin

How can I display a tooltip on an HTML file?

6 Answers6

Demo

Note: