How To Do Easy Tooltip Popups
Friday, February 8th, 2008Categories: Web Development
RSS Comment Feed
Trackback
This was something I thought of doing (originally, I was trying to make it CSS only, but I ran into problems with IE), so I figured why not make an extra easy to understand, good looking CSS/Javascript tooltip.
What we’re going to be making is a popup tooltip (or help box) that pops up once you over an icon, (in this case, a question mark). The method that we will look over validates for both CSS and HTML.
Demo
Stylesheet
The CSS is pretty straight-forward. Once you put this on your site, you can place as many tooltips as you like on your website, and you can style them with one chunk of CSS. I’ve taken the liberty of adding comments in the CSS to explain some of the attributes. Unless I say otherwise, these attributes are required.
.questionMark {
position:relative;
height:26px; /*dimensions of our image*/
width:26px;
background:url(/wp-content/questionMark.gif) top left no-repeat;
}
.toolTip {
position:absolute;
left:26px; /*Moves it to the right beside the question mark*/
top:0;
display:none;
/*The attributes below make it look pretty*/
width:100px;
padding:5px;
border:1px solid #ffffff;
background-color:#eeeeee;
font:10px/12px Arial, Helvetica, sans-serif;
}
That seems easy doesn’t it? Let’s jump into the HTML (and Javascript).
Code
<div onmouseover=”document.getElementById(‘tt1′).style.display=’block’” onmouseout=”document.getElementById(‘tt1′).style.display=’none’” class=”questionMark”>
<div id=”tt1″ class=”toolTip”>Eat your vegetables. Brush Your Teeth</div>
</div>
As you can see, the html code is a little more complicated, but I’ll explain.
What we have is our question mark div container (class=questionMark), within it, we have our tooltip (class=toolTip). I created some Javascript that looks for the id name of the tooltip: id=tt1, and makes it visible when the question mark is moused over, of course, when the mouse leaves the question mark, the tooltip is made invisible.
In terms of scalability, since Javascript requires a unique id (or class) name to do this, you’d only have to increment the value after the “tt” (eg. tt2, tt3, tt4…). The style will be retained so across the board updates should be easy.
Hope that helps. 
Related Posts
- Download a PHP Form Creation/Validation Framework
- New Big Contender in the Text Link Market?
- Applications That Make Web Development Easier
March 24th, 2008 at 12:06 pm
Hi,
thanks for making things so clear and easy.
I changed the code of your example so that the tooltip contains text and images, and is opened by the “onClick” event. Now I would like to add a link inside the tooltip, in order to close it (instead of the “onmouseout” event)… Is it possible ? (I’m a beginner in javascript!)
Thanks in advance
Mathieu
March 24th, 2008 at 1:06 pm
Hi Mat,
Thanks for the comment.
Take out the onmouseout event.
Create a link. and put the onmouseout event in an onClick event in the A tag.
CLOSE ME
March 24th, 2008 at 1:29 pm
well, I must do something wrong… it works when the link is outside the tooltip, but not when inside )-:
Here’s my code :
Eat your vegetables. Brush Your Teeth
CLOSE ME
Is there something I can change ?
Thanks again.
March 24th, 2008 at 1:31 pm
That won’t work. In your browser, do View Source, and look at me Close Me link’s code.
October 1st, 2008 at 9:20 pm
Is there a way to create the pop-up without using CSS? In other words, to keep the code right on the HTML page?
Also, if I already have a CSS style sheet, would i be taking the code you prescribe and enter it in there next to the other style info?
Thanks!
October 2nd, 2008 at 8:38 am
Yeah, you can stick the CSS in the header of the page.
The answer to the second question would be yes.
October 20th, 2008 at 6:55 pm
Hey Patrick,
Thanks very much for the help. I’ll be using the pop-up tool tip very soon. I already implemented it, I am just not finished with the design of the page I am working on. Apart from tooltips and widgets, do you have any suggestions for other cool things i can add to my page?
February 18th, 2009 at 10:58 am
Thanks so much for sharing this. I’ve been looking for a simple CSS Tooltip Popup for my Senior Chat site for ages.
Thanks for sharing…
Regards
Rob.
May 30th, 2009 at 3:54 pm
Patrick,
I have to say that this mod makes me smile everytime I use it.
I am using it to change a text message in a picture of a TV, like changing channels, it’s awesome.
THANK YOU SO VERY MUCH for posting this html/css code, it makes the world a better place.
Best Regards,
Rob C.
Cedar Rapids, IA (USA)
March 5th, 2010 at 10:53 am
[..] A little unrelated, but I quite simply liked this website post [..]
June 28th, 2010 at 4:00 pm
Great, and I was using all the time a 14kb JavaScript xD h
December 1st, 2010 at 2:29 pm
This is fantastic, and very simple. But how do you put links in the text that appears in the mouseover popup? for example: Eat Veg, Brush Teeth (Read More…)
Images might be useful also. Help appreciated.
Thanks,
Adam
December 1st, 2010 at 2:32 pm
ignore me… I did it
March 26th, 2011 at 8:14 am
Hai Patrick,
I have got a interspire webshop and want to add tooltips in it.
I want people to see a picture when going over the question mark.
What code (css and html) should i use and where do i have to put it?
Greetz Mark.
June 17th, 2011 at 1:53 pm
This article really helped me solve the problem. The best part is that it’s very simple, as opposed to
other approaches which inject div(s) on mouse over and remove them on mouse out. The problem with
that approach was that pop-up wouldn’t show up always.
Great Job Patrick !
December 1st, 2011 at 6:36 am
Hi Patrick,
Is there a way to force the tooltip to appear above an iframe? (I know hated iframes) Using the tip within a narrow iframe, but want the tooltip to show in its full height over this.
This might not be possible?
J