Javascript tooltip

This script takes the text from the title attribute and shows it in a tooltip that stays visible until the cursor leaves the element.

Javascript
function showTT(el) {
var ttext=el.title;
var tt=document.createElement('SPAN');
var tnode=document.createTextNode(ttext);
tt.appendChild(tnode);
el.parentNode.insertBefore(tt,el.nextSibling);
tt.className="tt";
el.title="";
}
function hideTT(el) {
var ttext=el.nextSibling.childNodes[0].nodeValue;
el.parentNode.removeChild(el.nextSibling);
el.title=ttext;
}
function tooltip() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
imgs[i].onmouseover=function() {showTT(this);}
imgs[i].onmouseout=function() {hideTT(this);}
}
}
window.onload=tooltip;
HTML
<h1 id="jstt">Javascript tooltip</h1>
<p>This script takes the text from the title attribute and shows it in a tooltip that stays visible until the cursor leaves the element.</p>
<p><img src="images/wine.jpg" title="When compared to beer or liquor drinkers, and even non-drinkers, those who happen to drink wine have lifestyles that are healthier. Wine drinkers are thinner and have more normal weights; they exercise more; smoke less; have a higher intake of fruits, vegetables and salads; have a higher education and socio-economic status; eat less saturated fat (fewer servings of red or fried meats) and more fiber; have normal cholesterol levels; drink less alcohol; often work in white collar jobs; and are in better health than the rest of the population. Those individuals who drink wine also happen to be more well adjusted; less neurotic and depressed; and have a higher I.Q. These many lifestyle factors that account for improved health make the use of wine no longer significant."></p>
CSS
.tt {
position:absolute;
border:1px solid gray;
width:300px;
margin:1em;
padding:3px;
background:#fff;
}

Comments

#1
2007-05-13 Luke says :

Hi, excellent tutorial. Is there any way you can make the script to interpret html tags in the actual title attribute, so you could have <img src="whatever" title="<strong> BOLD </strong> Normal <br> <strong> More BOLD </strong> normal">
So interpreting the tags in the title="", is it possible?
Thnaks

#2
2007-05-13 BonRouge says :

Luke,
No, you can't do that.
You could do other things, like use one of my toggle scripts, but you can't put html within the title attribute.

#3
2007-08-29 Cathy says :

I tried the code above, but I couldn't get it to work. I copied the Javascript and CSS above into the head tag and the html into the body tag. I even viewed your source code and copied the entire source code into an html page......still...not working....Any idea?

#4
2007-08-29 BonRouge says :

Here's the same javascript tooltip on a very simple page. Copy the source from that page and you should have no problem. If you still have a problem, I have no idea why... frown

#5
2008-02-25 Gonta says :

Is it possible to have the tooltip show when a link is clicked and remain until the links is clicked again, even if the cursor is off of the link?

#6
2008-02-25 BonRouge says :

Gonta,
Yes, just change the tooltip() function to this:function tooltip() {
var imgs=document.getElementsByTagName('img');
for (i=0; i<imgs.length; i++) {
imgs[ i ].onclick=function() {
if (this.nextSibling && this.nextSibling.className=="tt") {
hideTT(this);
}
else {
showTT(this);
}
}
}
}


(Of course, you'll want to use spaces or tabs there - my comment system isn't very good. frown)

#7
2008-07-05 Oscar says :

Great code. In internet explorer (7) if you move the mouse fast over the title created will give an error. Works good in Firefox (3), Opera (9.5) and Safari Win (3)

#8
2010-10-20 Rohit says :

Thankx for this great script BonRouge Buddy smile

#9
2010-11-07 Mary (thats my name :) says :

Super! Thank You!
Is it possible to make the tooltip stay in window boundaries, e.g. if the image is right positioned?

#10
2011-03-22 Michael says :

Awesome script ... working on adapting it right now!
Is there a simple way to prevent the created tooltip from disappearing if the mouse is over it?
For example, I have it positioned on top of my image, so the mouse is technically "out" of the image, causing it to flicker.

Ideas?
Thanks again!

#11
2012-07-02 mikey says :

can i use it for text instead of images?

#12
2012-07-03 BonRouge says :

mikey,
Yes, you can. Just put your text in span tags and give it a title attribute.
<p>I want to highlight <span title="This bit of text is really interesting. Let me tell you more about it...">this bit of text</span> right here.</p>

#13
2012-07-03 mikey says :

me again, that did the trick!
but now i see the code at the top of my page....
in IE8...

#14
2012-07-03 mikey says :

boy am i the pest of the day..got that figured out,
but the tooltip vanishes after a few seconds...it doesn't stay until mouseout..

#15
2012-07-03 BonRouge says :

mikey,
That's surprising. If you can show me your page - post a link - I'll have a look and see if I can help.

#16
2012-07-04 mikey says :

page should be up soon..right now i have nowhere to put it.

#17
2012-11-23 mills says :

nice workd...

#18
2013-03-26 Steve says :

I'm using the Onclick version of thsi tooltip, however i would like the tooltip to close when the user clicks anywhere outside of the displayed message. Is this possible?

#19
2014-02-06 sao sang mo says :

hi,
This works on a element?
http://xachtaygiatot.com
thanks

#20
2014-02-06 BonRouge says :

sao sang mo,

I&m not really sure what your question is there. Can you clarify that for me?

Comment form

Please type the word 'gorilla' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url