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 #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)
Thankx for this great script BonRouge Buddy 
Super! Thank You!
Is it possible to make the tooltip stay in window boundaries, e.g. if the image is right positioned?
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!
can i use it for text instead of images?
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>
me again, that did the trick!
but now i see the code at the top of my page....
in IE8...
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..
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.
page should be up soon..right now i have nowhere to put it.
nice workd...
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?
sao sang mo,
I&m not really sure what your question is there. Can you clarify that for me?
expository thesis statement examples <a href="https://thesismethod.com/ ">buy thesis</a> how to cite a thesis chicago
abortion essay <a href="https://essaymerino.com/ ">the best way to ensure parallel construction in your essay is to use similar</a> cause and effect essay examples
buy essay cheap <a href="https://essaymeshing.com/ ">heading in essay</a> atlas shrugged essay contest
metformin physical description <a href="https://metforminynd.com/ ">eye twitching metformin</a> metformin und milchprodukte
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