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 cholesterols, 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 #2Luke,
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.
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?
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... 
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?
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. )
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)
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
So interpreting the tags in the title="", is it possible?
Thnaks