How to invoke a "tooltip" when hovering over ID'd HTML elements in a Browser?

Question

I am working on a version of "Huck Finn" that displays dialog in different colors, depending on the speaker (purple for Huckleberry, brown for his Pap, etc.) by using CSS like so

#huck {
    color: purple;
}

...and HTML like this:

<p><span id="huck">"But some says he got out and got away, and come to America."</span></p>

A working model of this can be seen here

I have a "character mapping" showing which character is which color near the start of the doc, but I realize many readers would forget which color represents which character and, rather than forcing them to go all the way back to the start of the doc to remind themselves, I would like to allow them to hover over the colored text and see in a "popup window" or "tooltip" or what have you, who it is. So if they were to hover over the sentence above (anywhere between "But" and "America") they would see see something like "Huck is speaking".

Is this possible? If so, how?

Have you considered the [title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title)? — Martijn Arts, Mar 11 '15 at 15:06
I was going to suggest title attribute too - although I'll just leave Kudos for the amount of grinding that page must have taken so far. — Jack hardcastle, Mar 11 '15 at 15:07
FYI, IDs must be unique on document context, use class instead — A. Wolff, Mar 11 '15 at 15:07
@B.ClayShannon If you don't care of using invalid HTML markup, who cares?! :) — A. Wolff, Mar 11 '15 at 15:11
@B.ClayShannon it may work fine, but it's [still wrong](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). Just because browsers allow for a lot of leniency with invalid HTML doesn't mean it's correct. You can choose to write invalid HTML if you want to, but there's a perfectly fine alternative that will make a lot more sense and is much better supported for this use-case (`class`). — Martijn Arts, Mar 11 '15 at 15:13
You should care if you are using jquery to target elements. It will only return a single id if you use this selector $('#huck'); even if there are multiple #hucks on the page. — lharby, Mar 11 '15 at 15:39
@lharby: Okay, I updated it; I changed those IDs to classes; thanks to A. Wolff and TotempaaltJ and lharby. See http://jsfiddle.net/clayshannon/tL4s1hjr/81/ — B. Clay Shannon-B. Crow Raven, Mar 11 '15 at 15:56

score 2 · Answer 1 · answered Mar 11 '15 at 15:17

what about an :after

#huck {position:relative;}
#huck:hover:after {
    position:absolute;
    content:'This is huck talking';
    top:30px;
    left:0;
    display:inline-block;
    background-color:violet;
    color:white;

}

And no need to add so many multiple tittle tags in all yout html.. plus you can stylize the "tooltip" as You wish.

score 1 · Accepted Answer · answered Mar 11 '15 at 15:11

1

Suggesting title attribute over the paragraph tag

<p><span id="huck" title="Huck is speaking">"But some says he got out and got away, and come to America."</span></p>

answered Mar 11 '15 at 15:11

Vijay

114
1
2
16

chiapa · Answer 3 · 2015-03-11T17:08:43.547

You could try using Kendo UI Tooltips. You can style them anyway you wish and change some settings such as the position in which it appears.

$("#aTooltip").kendoTooltip({
  position: "top",
  animation: {
    open: {
      effects: "fadeIn",
      duration: 300
    },
    close: {
      effects: "fadeIn",
      reverse: true,
      duration: 300
    }
  }
});
$("#aTooltip2").kendoTooltip({
  position: "bottom",
  animation: {
    open: {
      effects: "slideIn:left",
      duration: 300
    },
    close: {
      effects: "slideIn:left",
      reverse: true,
      duration: 300
    }
  }
});
$("#aTooltip3").kendoTooltip({
  position: "right",
  animation: {
    open: {
      effects: "zoom",
      duration: 300
    },
    close: {
      effects: "zoom",
      reverse: true,
      duration: 300
    }
  }
});

.tts {
  float: left;
  margin: 0 20px;
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.silver.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>

<br/>
<div id="tooltips">
  <div id="aTooltip" class="tts" title="Here is a tooltip">
    This is one
  </div>
  <p></p>
  <div id="aTooltip2" class="tts" title="Here is another tooltip">
    This is two
  </div>
  <p></p>
  <div id="aTooltip3" class="tts" title="Here is some other tooltip">
    This is three
  </div>
  <p></p>
</div>

Could this be of use to you? You can edit the tooltip style as you wish, giving it some prettier look than the default title tooltip, or use some of the Kendo UI default styles for tooltips.

You can also add animations to the tooltips.

score 1 · Answer 4 · edited May 23 '17 at 11:50

To add to @Alvaro-Menéndez answer, I found a pure css solution on SO.

Check the fiddle: http://jsfiddle.net/lharby/tL4s1hjr/82/

It uses CSS3 selectors to style the title attribute:

span:hover {
    position:relative;
    cursor:pointer;
}

span[title]:hover:after {
  content: attr(title);
  background:yellow;
  padding: 4px 8px;
  color: #000;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
}

This was answered here on SO

Initially I was going to try and come up with a jquery hover function, but I think this is much neater.

How to invoke a "tooltip" when hovering over ID'd HTML elements in a Browser?

4 Answers4

Linked