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

Answer 1

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

Answer 2

You can use title attribute

<td title="Hey there">

Answer 3

just add title attribute like that:

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

Answer 4

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

Answer 5

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.

Answer 6

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