Tool-Tip on Span or Div?

Is it possible to get one of those yellow, pop-up Tool-Tip thingies when a user hovers over a <span> or a <div> ?

I have some financial and statistical data that is displayed, and I think it would be helpful if I can show how the calculation was done using a Tool-Tip thingy.

For example, if you hover <span>(65%)</span> you might see…

ROI = Gains from Investment - Cost of Investment) / Cost of Investment

As always, I try to write code which is compliant, and yet for stuff like this it, may mean bending some rules!

Can this be done effectively?



Sure it can be done, with the title attribute:

<span title="ROI = (Gains from Investment - Cost of Investment) / Cost of Investment">(65%)</span>

Or this way, which displays a dotted line under 65%:

<span><abbr title="ROI = (Gains from Investment - Cost of Investment) / Cost of Investment">(65%)</abbr></span>

Validates in HTML4 and 5, and I should therefore think it should also validate in XHTML. However, this standard method doesn’t work on touch screens. For tooltips that work on both, you need Javascript, such is in this code (live demo):

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Light-weight Tooltip by FC</title>
html {
    font-size: 62.5%;
body {
    font: normal 1.3em Verdana;
    background-color: white; /* just for the JSBin demo */
h2 {
    text-align: center;
    margin-bottom: 2em;
span.tool {
    position: relative;
    display: inline-block;
    border-bottom: 1px dashed black;
span.tool:hover {
    cursor: help;
span.tip {
    position: absolute;
    bottom: 20px;
    left: 0px;
    display: block;
    width: auto;
    white-space: nowrap;
    font-size: .9em;
    border: 0px solid black; /* change as desired */
    border-radius: 6px;
    padding: 1px 5px;
    background: #eee;
    background: linear-gradient(top, #eee, #ccc);
    background: -moz-linear-gradient(top, #eee, #ccc);
    background: -o-linear-gradient(top, #eee, #ccc);
    background: -webkit-linear-gradient(top, #eee, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background: -ms-linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc);
    zoom: 1;
    visibility: hidden;

    <h2>Light-weight Tooltip by FC</h2>

    <p>The <span class="tool">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>

        It is part of the
        <span class="tool">UN
            <span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
        which was established in 1945.


	<p>Explanation and 'minds':</p>

        <li>The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.</li>
							 <li>If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.</li>
        <li>In the current code the width of the tips is set to <i>auto</i>, and controlled with <br>s in the tip text. Change to fixed width as desired.</li>
        <li>With the current code tablet users must tap (= <i>onclick</i>) rather than press-hold (= <i>onmousedown</i>). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.</li>
								<li>The HTML is valid and the code works in IE8 as well.</li>
        <li>For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.</li>

var tools = document.querySelectorAll('.tool'); // mind the dot
var nrOfTools = tools.length;
for (var i=0; i<nrOfTools; i++) {
    if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
        tools[i].onclick = function() {
            if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
                this.children[0].style.visibility = 'visible';
                this.children[0].style.visibility = 'hidden';
    else {
        tools[i].onmouseover = function() {
            this.children[0].style.visibility = 'visible';
        tools[i].onmouseout = function() {
            this.children[0].style.visibility = 'hidden';

Thanks for the response.

I tried using <abbrev> but can’t get the dotted underline thing to work.

What is the best way to let users know that if they hover over my <span> that they can see more details? (It may not be obvious to people.)



Than you must have a coding error somewhere (<abbrev> vs. <abbr>?), because as this demo shows, the <abbr> tag default gives a dotted underline.

You are right.

My bad!

Thanks for the help! :slight_smile:



Only in Firefox and Opera. Chrome and IE do not apply an underline style to that element so you would need to do that with some extra css.:slight_smile:

And right you are. Goes to show how much I use other browsers than FF… Or the simple HTML method, as opposed to the dynamic HTML method… :slight_smile:

Care to share what that might be? :slight_smile:


abbr {border-bottom: 1px dotted black;}

I think you could have worked that one out for yourself Debbie :slight_smile:

Everything is obvious when you know what you’re talking about! :stuck_out_tongue:

You made it sound like there was some hidden, yet built in feature to bring the clueing out.

Yeah, I guess adding a dotted border accomplished the same thing.