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.
126 Responses
Baz Web Development: AJAX, Joomla, CSS » Blog Archive » LinkMania: December 3, 2006
Dec 03, 2006[...] CSS Bubble Tooltips – Why pull out all that JavaScript for a simple tool tip. Nice and clean. [...]
chandra
Aug 11, 2007Hi,
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
trent
Aug 31, 2007Simply 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
Jim
Sep 11, 2007Very 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!
Jim
Sep 11, 2007I adjusted the z-index and now it works smoothly in Firefox. Thanks
trent
Sep 11, 2007Hey Jim,
Sorry I just caught your comment. Glad to hear you got it working Ok.
Brian
Sep 16, 2007Is 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?
trent
Sep 16, 2007If 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!
Brian
Sep 16, 2007In 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!
trent
Sep 16, 2007I 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.
Brian
Sep 16, 2007Awesome. Rock on Trent. Thanks!
Annie
Nov 01, 2007Thanks 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.
trent
Nov 01, 2007Yeah, 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!
Annie
Dec 06, 2007Trent,
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.
trent
Dec 06, 2007The 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!
Annie
Dec 06, 2007Nevermind. 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.
Annie
Dec 06, 2007You’re awesome Trent. Much appreciated. Thanks for your help.
trent
Dec 06, 2007Anytime!
Markus
Jan 17, 2008I 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?
trent
Jan 17, 2008Do 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.
Cathy Marshburn
Jan 19, 2008Hey 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.
trent
Jan 20, 2008Hey 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?
Cathy Marshburn
Jan 21, 2008Yes, 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.
trent
Jan 22, 2008Ok, 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.
Cathy Marshburn
Jan 22, 2008I 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.
Cathy Marshburn
Jan 22, 2008http://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.
trent
Jan 23, 2008Looks great! Best of luck with the site!
j
Jan 31, 2008This does not work in opera (9.25)! Bubbles gets messed up, especialy if bubble should cover another object like table border.
trent
Jan 31, 2008You’re right, it it tries to show up but the bubble is screwed up. I wonder if it is a transparency issue??
Sean
Feb 06, 2008Hi,
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.
trent
Feb 06, 2008Hey 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.
Dale
Mar 11, 2008Hi Trent: Thanx for the code. I had to massage it a bit to incorporate both images and text. Cheers dale
Jeff
Mar 20, 2008Trent: 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
trent
Mar 21, 2008Hey 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.
dom
Apr 09, 2008Hi 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
trent
Apr 09, 2008Dom,
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.
Sirg
Apr 15, 2008Very nice script! I just wanted to say thanks!
Holli
Apr 16, 2008This 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.
trent
Apr 16, 2008It 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)
trent
Apr 16, 2008My example is also broken, it tries to work, but breaks, def looks like an issue with Opera.
Owain
May 16, 2008I’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??
trent
May 16, 2008you 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.
Mariusz
May 28, 2008Just 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
vasu
Jul 04, 2008i 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
trent
Jul 05, 2008make sure your background-position is set to bottom and that the parent element css is position: relative;
Ken
Aug 23, 2008Is there a way to change the font?
trent
Aug 23, 2008Yes, in the CSS change the font or font-family setting
dannyb
Sep 10, 2008Any joy with working out the Opera issue Trent?
thboob
Nov 16, 2008I have an image displaying in my tooltip and for the most part it is just fine, but the image does appear to have a bit of a transparent effect to it. Is there something in the CSS that I can change to improve this.
jake
Nov 17, 2008By looking at the css you may have to add opacity filters to img within the tooltip in the css:
span.tooltip img{
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
Andi
Dec 09, 2008I’m can’t get the tooltip to display in the same position for internet explorer as it does for other browsers!
Here is a trimmed version of the code. Any ideas?
a.tt, a.lt{position: relative;z-index: 24;}
a.tt span{display: none;}
a.tt:hover { z-index: 25;}
a.tt:hover span.tooltip{display: block; position: absolute; top: -400px;left: 130px;}
Andi
Dec 09, 2008Sorry I missed the link
Andi
Dec 09, 2008Hi
I canât get the tooltip to display in the same position for internet explorer as it does for other browsers!
Here is a trimmed version of the code. Any ideas where I’m going wrong?
http://yogavive.kagool.net/test.htm
Any help would be appreciated
Regards Andi
trent
Dec 10, 2008Can you try using a wrapper div around the link tag and make that wrapper position: relative; Also you might try adding in a css reset, *{ padding: 0; margin: 0; border: 0; } and an xhtml doctype. I’ve noticed in the past the doctype can have a big effect in IE on how it renders css
Andi
Dec 10, 2008Hi Trent
Thanks for getting back to me. Unnfortunately I’m still having problems
I’ve uploaded the actual page which may help explain what is going on clearer.
I use CSS reset, The containing div is position:relative and the page has an xhtml doctype!
munni
Dec 11, 2008Hi Trent,
Is it possible to show the tooltip on the top instead under the a link? Please help me. I am in need of it urgently. Please let me know.
Thanks
trent
Dec 12, 2008Yes, it is possible. You would need to edit the bubble image to have the pointer coming from the bottom instead of the top. Then adjust your top attribute to move it upwards.
DaRK mAN306
Dec 15, 2008Thats why i love CSS .. it’s too simple ..
thanks man ..
all the best,
DaRK mAN306
Camilo Olea
Jan 15, 2009Hi trent! Great stuff!
I just have one problem, If you take a look at my site: http://www.vip-travel-club.com
Take a look at the top tabbed menu. I’ve only begun to apply the bubble tooltips, so only VIPlus and VIPortfolio have them enabled. My problem is, If I go from left to right, the moment I hover over a different menu tab, the bubble tooltip comes up, but if I go from left to right, for example, changing hover from VIPlus to VIPortfolio, does not make the VIPortfolio tooltip to appear. What settings do I need to tweak to fix this?
Thanks!
Camilo
Camilo Olea
Jan 15, 2009Hi, me again, sorry, I mistyped the previous post. If I go from right to left all is ok, problem is when going from left to right… thanks!
trent
Jan 16, 2009Hey Camilo Olea. Even though it looks like there is nothing there the bubble is actually a square block, just some of it is transparent(like where the pointer of the bubble is) If you move the tooltip down a little more where the bubble pointer just reaches the bottom of the link you should be fine. Hope that helps!
Camilo
Jan 16, 2009Did that, worked like a charm!
Thanks trent! Great stuff!
hienduchuynh
Feb 09, 2009Hi, thanks about your share.
But, when I use it, I see a problem : “in opera, when scroll, the tooltip’s position is not correct.
Hope that helps!
Thanks
hienduchuynh
Scott
Mar 05, 2009Hi Trent – this is the best css tooltip around! Many thanks!!
I’m having an issue I hope you can help with. The modern w3c browsers (ie8, latest safari, latest FF) cuts the tooltip off where the content container ends and my right column area begins. ie7 renders this fine. I tried raising the z-index but it doesn’t seem to work. Any suggestions?
Cheers!
Gockel
Apr 03, 2009Sorry, i speak english only a little.
I have a problem. The Bubble work great with text links. But with picture (Height 219 px) the position in IE7 is another as FF3. understand what i mine?
Greetings
Gockel
trent
Apr 03, 2009A couple things you can try.. do you have a css reset?
*{ margin: 0; padding: 0; }
Also make sure your parent element has a position: relative;
Gockel
Apr 04, 2009When i need position: relative then my layout crashed. But i have found another alternative.
Thank you for your fast answer.
Greetings
Gockel
Mike McD
Apr 15, 2009Your download link isn’t working! I spent the last half hour looking for a tooltip script that actually stayed open while you moused over the text (so I could put links in there) and didn’t move with the mouse, and now your download link si teh broken! Aughh! *sob*
Mike McD
Apr 15, 2009No worries… I glommed the code from the example page. Made some changes to get it to appear horizontally rather than vertically; check it out at ShowBum.com (linked from my name in this comment)! It came out great.
Thanks for contributing this CSS bubble tip!
Ash Brown
Apr 17, 2009Howdy Trent,
Great tooltips, but I can’t get mine working. I don’t get the top and bottom padding and bubble graphic, but I do get the middle!
I’ve adjusted the z-index value to avoid a conflict with something else on our site. Very odd. I noticed Mike McD got his working ok albeit horizontally so it can’t be my browser (FF3). Same thing happens in IE7. I’ve checked there’s no conflicts with any of our javascripts or any other styling in our stylesheet.
You can see the tooltip on the page linked to my name – it’s the ‘Free Account Transfers’ graphic. I’ve tried text also, same thing.
Any ideas/advice? ANY help much appreciated.
Cheers, Ash
Ash Brown
Apr 17, 2009Oh yes, and your zip downloads aren’t there any more. I got the code from your page though, as Mike did.
Ash Brown
Apr 17, 2009Hey I discovered there is some kind of conflict so I’m looking into it. I’ll let you know – it’s going to take a while.
Ash
trent
Apr 19, 2009Sorry, I’ve been in the process of moving my blog to a new server and just realized its not emailing me when I get a comment on my blog, sorry. Also this is the reason the download wasn’t working. I hope to have everything back fully functional shortly!
trent
Apr 19, 2009It looks like only one image, did you get the other image? There should be two with this tooltip example.
Ash Brown
Apr 21, 2009Hi, yeah I’ve got both images. Notice that it’s not getting the padding either – strange that it is getting the middle image, but not the padding, when both come from the same style def!
I made a test page which uses our full stylesheet (which includes your tooltip styles) and everything works perfectly, so there is some kind of conflict with our javascripts I think:
http://www.freevirtualservers.com/_test.html
I’m going to work through a validator and try to get it sussed, but if you have any pointers/advice please feel free to let me know. Thanks for getting back to me.
Ash
Mike McD
Apr 23, 2009FYI (directed mostly at Ash): Trent’s code (and my modified horizontal version, which I would totally post on a blog if I had one) works perfectly in IE6, IE7, IE8, Firefox 2, Firefox 3, Google Chrome and Google Chrome Beta. I tested it in each for the benefit of my client.
Also, if anyone’s seeking an example of the horizontal version of this code, make sure that when you visit ShowBum.com (linked from my name on this comment) you choose the maximum values for date and distance, don’t enter an address, and then click the search button. The site is still in Beta, so it doesn’t have a ton of shows on it. It’s safe for viewing at work, so no worries there.
Lastly (since I probably won’t be back at this post any time soon), I’d just like to extend my sincere thanks to Trent for this elegant solution. It really is terrific.
Cheers.
Ash Brown
Apr 24, 2009Thanks for the info Mike. I managed to get it all working and it is indeed very lovely. Used it on a couple of pages now. Works great in IE and FF as you say. Updated my link so you can see it working. There was a conflict with one of our style divs. Yet to get to the bottom of EXACTLY what was going wrong though.
Thanks guys
natasha
May 06, 2009hi,
i have used your code as is, it works fine in IE but in FF and OPERA TOP SPAN is not displayed and rest of the baloon i displayed. how can i fix this? thank you
trent
May 06, 2009Do you have both images for the bubble? There is a full bubble image and a thin filler image.
Axel
May 08, 2009Hello,
I have the same problem as Scott (64). But I have the box in a table, outside the table is hidden. Can you help me, please?
trent
May 10, 2009Hi Axel, just a quick check, do you have both background images?
Axel
May 10, 2009Hello trent,
yes the tooltip displayed correct. But outside table the overlapping part is hidden.
Ben
May 11, 2009Hi,
I just wanted to download the source but the link doesn’t work.
Does anyone know where to download it?
Thanks Ben
trent
May 12, 2009Sorry, Since I’ve switched servers I’ve not had a chance to restore the download. You will have to copy or save the source and download these two images:
http://trentrichardson.com/examples/csstooltips/bubble.gif
http://trentrichardson.com/examples/csstooltips/bubble_filler.gif
trent
May 12, 2009Download should now be fixed!
Jim
May 27, 2009Hi Trent,
your Bubble looks very good and i would like to add it in place of “alt” tags on a picture link that is in table in html.
my site is in css and i added your code to the style sheet and it works for your example “hover over me text” but i do not know how to make it work on the table i have.
this is the code for the table:
!!<
>!!
Can it be done?
Regards
Jim
Jim
May 27, 2009Ok,
I dont know what happened to my post above.
the but you can see the 6 images that i want the bubble to appear on at the bottom of the homw page http://www.sto-it.co.uk
trent
May 27, 2009Hey Jim,
You should be able to use similar code as in my example, except replace the text inside the a tag with your img tag. you already have an [a] tag wrapped around your image, so just drop in the tooltip code.
Jim
May 27, 2009Hi
Nearly there, or so I thought, I got bubble tooltips working as I wanted, it looked great! Had to change the position of the bubble because it was appearing in the centre of the picture. Done this by changing the stylesheet settings top:0px; left:0px;. Everything looked good in internet explorer, but the position of the bubble in firefox, chrome and safari is well below the image. My test page…
http://www.sto-it.co.uk/acatalog/test.html
Any ideas on how to solve this?
Regards
Jim
Jim
May 27, 2009Hi
Nearly there, or so I thought, I got bubble tooltips working as I wanted, it looked great! Had to change the position of the bubble because it was appearing in the centre of the picture. Done this by changing the stylesheet settings top:0px; left:0px;. Everything looked good in internet explorer, but the position of the bubble in firefox, chrome and safari is well below the image. Test page.
http://www.sto-it.co.uk/acatalog/test.html
Any ideas on how to solve this?
Regards
Jim
trent
May 27, 2009try placing the tooltip code before the [img] tag instead of after
Jim
May 28, 2009Hi Trent,
This works good in internet explorer but the position of the bubble is too low in chrome firefox and safari.
[a href="http://www.sto-it.co.uk/acatalog/Work___Life_Space_Balance.html" class="tt">...when you are getting the work / life space balance right...when you are getting the work / life space balance right...when you are getting the work / life space balance right...when you are getting the work / life space balance right</a]
Can you please show how I should change the code?
Regards
Jim
cvele
Jun 01, 2009Exellent css.
Is it possible to make bubble pic more transparent and text to remain opaque ?
thanks
trent
Jun 05, 2009Yes, you might try using a transparent background image, like a gif or png.
cvele
Jun 05, 2009That is a one way. And with css?
Priscilla
Jun 19, 2009Love Bubble Tooltips! I thought I had them working with an image. Firefox on the Mac and PC it appears at the bottom of the image. IE7 on the PC, the Bubble appears at the top. I don’t see a way to work around this. I’ve tried moving the spans from the back to the front of the img tag as well as several other attempts. I would like the bubble to make the dog look like he is speaking. Thanks.
Priscilla
Jun 19, 2009URL didn’t show up. Hope this works.
[http://www.priscillachristian.com/hop/pages/dog_training.html]
trent
Jun 19, 2009Priscilla,
Try making sure the parent elements have a position: relative, that way the tooltips absolute position will be relative to the parent element.
Priscilla
Jun 19, 2009Thanks Trent! I apologize in advance for not knowing this but here is my dilemma. I went back and did what you said (I think). I believe I have applied this to all containers that hold this tooltip. But it still isn’t working. Obviously I’m missing something. I did read your previous post @ #45. I tried applying this to just the one above it and to all above the tooltip. Thanks.
trent
Jun 24, 2009Hey Priscilla,
Have you tried using firebug in firefox and firebug lite in other browsers to try and determine where the positioning is getting messed up?
Andrea Weissenbuehler
Jun 26, 2009I just discovered this wonderful creation of yours Trent! What a wonderful thing you have here, I thank you for sharing and inspiring ideas!
meenal
Jun 30, 2009Hi,
is anyone using IE8? I get a dark border for the top image. I used PNG but no luck. If anyone has any solution… it would be great……..
trent
Jun 30, 2009Meenal,
Sorry for the slow response. Sounds like you might have some broken html somewhere. Have you tried firebug in with firefox just to see what styles are leaking through? Or there is also a firebug light which works in other browsers:
http://getfirebug.com/lite.html
meenal
Jun 30, 2009Hi trent,
The tooltip work great in FF, Chrome, IE 7… am not sure as to why it is breaking in IE8……
I tried the example given on this site on IE 8…. and its the same…. (dark border on top portion)
trent
Jun 30, 2009I unfortuantely don’t have an IE8 machine available at the moment to help. As soon as I can find one I’ll test it out!
A collection of Free ToolTips using AJAX, JavaScript & CSS
Jul 01, 2009[...] CSS Bubble Tooltips is a nice and easy customizable non-javascript [...]
Craig
Jul 05, 2009Hi there, I took your fantastic bubble tooltip code and added all sorts of dynamic ASP content to it. Its working great! I got it all to validate and works in every browser I tried it in! (firefox 2, 3, IE7, 8, chrome etc)
Thing is, I now have a lot of tooltips on my page and when just running my mouse over the page, the tooltips popup (as they are meant to) but, its kinda messy! I’ve been trying to think of a way to put a delay on the tooltip hover. Looked at jquery and javascript etc but, cant really get my head around exactly WHERE the delay should go! How would you put a delay on this? I’d really appreciate some direction! Thanks for your great original idea!
Craig..
meenal
Jul 07, 2009hi craig,
did u encounter any image problems in IE8 as i have?
Benny
Jul 11, 2009Hi. Love this Tool tip. Thanks a million. One question, You mention separating the link from the tool tip in the last sentence of the description, but I don’t quite follow how to do that . I want to only have the bubble come up when hovering over the original link word and go away when over the bubble (which I’ve moved right to set it away from my vertical navbar).
Craig
Jul 11, 2009meenal – No, I had initial problems on IE7 and 8 when I was using solely PNG files. There is a known bug with that that causes major slowdown on hovers (when there are lots) but, I GIF’d them and its good as new now.
I suspect your problem is HTML or CSS based!
Still no solution to my delay on hover either as yet :(
trent
Jul 13, 2009Craig,
To get them to delay on hover you must use javascript, and pretty much remove your :hover css styles. CSS doesn’t do any type of delays. If you’re going to mix javascript I almost recommend going with a pure javascript tooltip like this one:
http://craigsworks.com/projects/qtip/docs/
Benny,
Technically the bubble is part of the link so if the mouse is over it the bubble will stay open. What you can do is change the bubble’s distance from the link so there is an empty space between the two. that way your mouse has to go over empty space(which isn’t the link) before arriving at the bubble. Try changing the “.tooltip” style for top or left (according to how yours is positioned).
Benny
Jul 13, 2009Thanks Trent! I’ll try that.
Angus
Aug 20, 2009One of the best tooltips I’ve seen. However, not to burst your bubble and all that. When the anchor is near the bottom of a container (e.g. div positioned absolutely) or the browser window, the tooltip disappears off the bottom of the container/browser.
Regretfully I have a list of anchors in an absolutely positioned and sized div. My tooltips are about 3 to 5 lines long. When hovering over an anchor near or at the bottom of the list, only the top half of the tooltip appears.
I can figure when I am near the edge of the browser window or div in javascript and then play games with the position of, say, a window, but I am unsure whether this can be done with css and, apart from possibly messing about with margins, not too sure if I can move the span element upward to display all the tooltip.
Any ideas how I can *easily* get round this. Otherwise, most appreciated for a great and simple piece of CSS. PS. I did away with the top and bottom spans and the image in the middle span as I am displaying tabular data in the tooltip.
ben
Aug 29, 2009ur the man! thx so much for your hard wrk!!
Dirk
Sep 26, 2009Just wanted to say thank you for that inspiring CSS code!
Have replaced width:200px by width:20em to let the tooltips scale along with the font size. That also required changing the images used … http://j.mp/CSS-ToolTips
zack
Oct 07, 2009I really love the effect and could use it for a number of purposes but I can’t get the top and bottom to display. Any help would be greatly appreciated.
http://s298435232.onlinehome.us/who.php
Tester
Nov 13, 2009hey guys,
i figured out that the opera problem depends on the css” position:absolute; ”
without it it works like a charme!
maybe this helps to solve/fix the problem.
cheers
Louise
Mar 31, 2010Hi,
I’m using this script in a project I’m working on.
It positions fine, looks great etc.. although I am having 1 problem. In Firefox this looks fine however in IE (I tried 6 and 7), all of the text in the bubble is being underlined. Initially I thought this may be a conflict problem as its a pretty big site I’m working on and there are a few CSS files, but then it works superb in FF… any suggestions?
Help would be much appreciated!
trent
Apr 02, 2010Hey Louise,
Sounds like one of two scenerios. Some broken html somewhere, or just need to add a line in the css for text-decoration:none; for the bubble
ClubPenguinCheats
Apr 06, 2010Even though it looks like there is nothing there the bubble is actually a square block, just some of it is transparent(like where the pointer of the bubble is) If you move the tooltip down a little more where the bubble pointer just reaches the bottom of the link you should be fine.
Dirk
Apr 26, 2010Made a version with only one and one …
http://j.mp/square-ToolTips
The graphics I used is more suitable for shorter anchor words because the tip points to the first character.
Thanks again
Mark
Nov 21, 2010This is great! Thanks mate
Antony Arendt
Jan 07, 2011Hi Trent,
just to let you know how nifty I find your solution.
I ventured to implement it on our website, instead of having people to visit umpteen pages and get their workspace cluttered or loose track.
Only there seems to be an issue with the opacity part. The w3c css validation service complains about it, and removing it completely doesn’t seem to impair functionality.
Anyway, thanks a lot for providing it.
Tony
Roger
Apr 20, 2011Another happy user here, thanks!
hollister uk shop
Jun 15, 2012To get know just about this good topic, you buy pre written essay or custom writing at the essay writing service. The numbers of writing services offer the essay writing about this good topic.
tamilselvan
Oct 08, 2012hi how to copy the tooltip content through mouse. pls help me out.