Sat 2 Dec 2006
Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. Besides that if you have an advanced site in the first place you probably have enought javascript already.
Also with the IE hack for the :hover state, you can do this with elements besides anchors.
If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.
December 3rd, 2006 at 3:15 pm
[...] CSS Bubble Tooltips - Why pull out all that JavaScript for a simple tool tip. Nice and clean. [...]
August 11th, 2007 at 10:28 pm
Hi,
I want to add a tooltip when I mouse over the or
I liked your idea of tooltip through CSS.
but i am not able to figure out how do I add it to other elements than [a].
please send me an example if you have.
thanks
chandra
August 31st, 2007 at 7:21 am
Simply create add an inner container to your element for the tooltip. Initialize that element to display: hidden and position: absolute in the CSS. On :hover set display: block. Be aware that :hover only works on [a] elements in ie6
September 11th, 2007 at 1:52 am
Very nice, with no javascript. Best I’ve seen with it.
In Firefox , if I have a horizontal navigation bar the bubble doesnt switch to the next link until the mouse is past the edge of the bubble , even though the mouse isn’t touching the bubble.
I imagine it would do the same with a horizontal nav bar too.
In IE it works fine. Is there any workaround?
Thanks!
September 11th, 2007 at 9:07 am
I adjusted the z-index and now it works smoothly in Firefox. Thanks
September 11th, 2007 at 11:47 am
Hey Jim,
Sorry I just caught your comment. Glad to hear you got it working Ok.
September 16th, 2007 at 11:40 am
Is it possible to add hyperlinks instead of text to the contents of the tooltip? I’ve tried and it seems to break the bubble, any suggestions on how to do this?
September 16th, 2007 at 1:31 pm
If you’re using it within a link, that probably wouldn’t be valid html(I don’t think you can have a link within a link), but if you’re using it within another element like a div it should work ok. That being said if you don’t really need the tool tip to be on the link you could adjust your html like such and adjust your css accordingly.
[div]my visible text[span]my tooltip text[a]my link[/a][/span][/div]
That sould work perfectly fine. Don’t forget though < = ie6 doesn't support :hover state except on [a] tags, you will need to use a fix for that(a good ie6 fix by Dean Edwards which corrects a lot of ie6 issues to function like newer browsers:
http://dean.edwards.name/IE7/ )
Hope this helps!
September 16th, 2007 at 3:05 pm
In theory that sounds right. However, it doesn’t appear that it works that way. Were you able to produce this functionality in any tests?
Thanks!
September 16th, 2007 at 6:55 pm
I was able to do it using spans and tweeking the css.
http://trentrichardson.com/downloads/?dl=csstooltips_with_span.zip
This worked with Safari, ff, opera, and ie7. ie6 and below should work with the fix like I mentioned above since its not using a link.
September 16th, 2007 at 7:19 pm
Awesome. Rock on Trent. Thanks!
November 1st, 2007 at 5:22 pm
Thanks for the great technique Trent. One major issue I’m having is the bubble appears under any form select fields for IE6 only. It’s known for IE6 that SELECT always appear in front of all other elements no matter what z-index you apply to them. I’ve read about using javascript and iframe as a workaround. However, this would defeat the purpose of using this clean and javascript free technique to create pop-up bubbles. Are there any possible work around using only CSS and HTML elements to bring the bubble in front of the select field for IE6? Let me know what you think. Thanks.
November 1st, 2007 at 7:20 pm
Yeah, thats definitely a pesky issue with ie6. The only way I’ve ever avoided it is by a little javascript and do an onmouseover, onmouseout event for that element. When the balloon is open just do in javascript
document.getElementById(’myselect’).styles.visibility = ‘hidden’;
and visibility = ‘visible’;
If you’re using jquery or prototype js library you can always have a selector find all elements with the balloons and apply these actions. Let me know if you need a little help with that if you need to try using a library. Hope that helps!
December 6th, 2007 at 2:02 pm
Trent,
I finally got around applying your advice to fix the IE select bug. Could you clarify if you’d apply the javascript to hide the select drop down or the specific balloon? I’ve test out the javascript but was not able to hide the select field while the balloon is open. My skill set lies mostly with CSS. I’ve have not had the opportunity to work with javascript so I’ll need to spiff up those skills and continue testing the script. I’m determine to make this work because the bubbles are just too cool to pass up. It works beautifully with the other browsers. Thanks again for the pointers.
December 6th, 2007 at 9:34 pm
The hardest part of this is the fact that its an ie6 only bug, we don’t want this fix to apply to other browsers. I’m going to assume you’re not using any javascript frameworks for this as well. The javascript will be to hide the select box. To use the document.getElementById() you will need to give your select an id, lets say myselect:
[select name="thename" id="myselect"]
…
[/select]
Also do the same for your link, I’ll call it myBubbleLink:
[a href="..." id="myBubbleLink"]…[/a]
Now you might want to create a function for your javascript and apply it to the link on mouseover and mouseout.. I’ll call the function hideSelect. It will check the select, if its visible it will hide it, otherwise it will show it. Also they are within conditional comments which is only visible to ie. The following should be placed into your [head] tag of your code:
<!–[if lte IE 6]>
hideSelect = function(){
var el = document.getElementById(’myselect’);
if(el.styles.visibility == ‘hidden’)
el.styles.visibility = ‘visible’;
else el.styles.visibility = ‘hidden’;
}
document.getElementById(’myBubbleLink’).mouseover = hideSelect;
document.getElementById(’myBubbleLink’).mouseout = hideSelect;
<![endif]–>
I hope that helps! If it doesn’t work and you can send me a link I will try to help you a little more!
December 6th, 2007 at 9:42 pm
Nevermind. I got my external script to work based on your javascript recommendation. It was fairly straightforward. Related to that, I also added if statements to only allow IE 6 to run the script. I like how IE 7 and other modern browsers render the bubbles so I left them in its natural state. Many thanks. Cheers.
December 6th, 2007 at 9:45 pm
You’re awesome Trent. Much appreciated. Thanks for your help.
December 6th, 2007 at 10:03 pm
Anytime!
January 17th, 2008 at 9:23 am
I tried applying your code, but even after taking it over identically and pasting it into my web editor the top and bottom parts of the bubble don’t show up, only the middle part. The images are accessible and the paths are set correctly, so that’s not the reason. Do you know what might cause this?
January 17th, 2008 at 12:07 pm
Do you have a link to your code? The only thing I can think of is like you said the links to the images, but if you’ve double checked those its hard to tell without taking a look at what you’ve got.
January 19th, 2008 at 10:30 pm
Hey Trent,
I’ve been playing with this code and I cut/paste to see if it would work on my page. (I did upload the 2 gif files and put my file location in the parenthesis.) The bubbles show up in the top left corner of my screen, not under the text. Additionally, the highlighted text is underlined as well as that in the bubble. Help! I am very “NON” technical so I’ll need special guidance. Thank you in advance.
January 20th, 2008 at 7:45 pm
Hey Cathy,
It sounds like something is getting overridden in your stylesheet. Do you have a link to your webpage where you’re having the problem?
January 21st, 2008 at 2:08 pm
Yes, thank you.
http://www.mypursepassion.com/work_table.html
I’ve cut and pasted just like on your page. I wanted to see if it would work and then I was going to edit for my content. My website builder is block - by block so some stuff is hidden from me. However, we can add html stuff inside our blocks.
Thank you so much. I’ve been working so hard on my pages. This is new for me. I know what I want though. Just not sure how to get there.
January 22nd, 2008 at 7:57 am
Ok, a couple things to start with, I’m not sure which one or if its either one is wrong, but very well could be both. There should only be one [head] tag and one [body] tag in your code. If you don’t have access to the [head] section of your code you can leave the [style]. Heres what to try first:
-remove the [head] and [body] tags from the code you copied from my site(not the ones from your original site)
-if possible move the entire [style] to the original [head] section.
-There appear to be a few [p] tags within the [style] which aren’t allowed, just remove those(these could have put in by your editor if you’re not using a plain text editor like notepad, have to be careful here).
Hope that helps! If not it should be a start, let me know if you need more help.
January 22nd, 2008 at 2:21 pm
I did it! Took me all day, but I did it! We don’t have access to our section via our block builder, so…here is what I did:
Cut out the style block and saved it in notepad as a css file. I had to load that to my special files folder at my website. Then I had to put some sort of ref string to call the style that was saved. Viola!
Thank you so much. I feel like a pro now.
January 22nd, 2008 at 2:24 pm
http://www.mypursepassion.com/designerpursegallery.html
Look for “Designer Choice”. Check out the different colors I was able to figure out.
I love it!
Thank you.
January 23rd, 2008 at 1:02 pm
Looks great! Best of luck with the site!
January 31st, 2008 at 1:51 pm
This does not work in opera (9.25)! Bubbles gets messed up, especialy if bubble should cover another object like table border.
January 31st, 2008 at 3:34 pm
You’re right, it it tries to show up but the bubble is screwed up. I wonder if it is a transparency issue??
February 6th, 2008 at 2:08 am
Hi,
Is there a way to have the tooltip extend horizontally to allow lines that do not have breaks in them.
e.g. if the text in the tooltip is com.metiom.sccore.core.service.ServiceController.processServiceMessage(ServiceController.java:719), it will not wrap and it will be extended beyond the tooltip bubble.
February 6th, 2008 at 7:46 am
Hey Sean,
With the actual bubble image background no. But with a different background yes you should be able to.. You should be able to add to your css:
overflow: visible;
and don’t constrain your width on the tooltip.
March 11th, 2008 at 11:46 am
Hi Trent: Thanx for the code. I had to massage it a bit to incorporate both images and text. Cheers dale
March 20th, 2008 at 9:40 pm
Trent: Great work!!! is it possible to flip the bubble vertically so the tooltip is going vertically up the page instead of down the page?
Cheers
j3ff
March 21st, 2008 at 7:49 am
Hey Jeff, It is possible but you will have to create a new background image as they cannot be rotated as of yet(Safari web browser is making nice steps towards this). You will also have to play with the margin accordingly in the css to reposition it.
April 9th, 2008 at 3:53 am
Hi Trent. I really want to use your CSS bubble tooltips for an image area. I tried using the modified code for but i can’t get it to work. Do you think it is possible to get it to work with an image map area?
thanks
dom
April 9th, 2008 at 2:34 pm
Dom,
Not sure if thats possible with an image map since the elements need to be within the image map in this case.. I don’t think thats allowed. It should however work for any element allowed to contain child elements.
April 15th, 2008 at 5:42 am
Very nice script! I just wanted to say thanks!
April 16th, 2008 at 9:48 am
This seems to be working fine for all browsers with the exception of Opera (ver 9.27 on my computer). Is there a fix?
This page has a tooltip: http://soilquality.org/basics.html
See ‘disturbances’ near the bottom in red text.
Thanks for providing this.
April 16th, 2008 at 1:54 pm
It sure is broken in Opera.. that is strange! I just upgraded opera yesterday, I wonder if it was broken in 9.26 as well or if this is a new issue? It appears to be an issue with opera, it does work in all other browsers.. I will look into this issue and try to respond in a timely manor.
btw: nice clean readable text, very easy to read. Too many people forget about readable text these days.. (I’m guilty as well)
April 16th, 2008 at 1:56 pm
My example is also broken, it tries to work, but breaks, def looks like an issue with Opera.
May 16th, 2008 at 10:55 am
I’m using this on a form however the bubble seems to show up behind the actual form elements is it possible to bring the bubble totally to the front??
May 16th, 2008 at 12:32 pm
you can play with your zindex within your css for the bubble and the inputs, but if it’s ie6 this isn’t fixable without an iframe due to known bugs within ie6.
May 28th, 2008 at 12:58 am
Just want to say thank you! Using it at the TeamSpeak tree now. You made a great job!
Regards
Mariusz “ginger|HFD” Bieniek
http://www.TSViewer.com
July 4th, 2008 at 2:59 pm
i added this for an image. it works fine for firefox but for IE the bubble starts from the top of the image. iwant it to start from hte bottom of the image
help
July 5th, 2008 at 12:29 pm
make sure your background-position is set to bottom and that the parent element css is position: relative;