CSS Bubble Tooltips

02 Dec

Posted by: admin in: CSS

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.

View Full Example and Code

Download Source

Share and Enjoy:

Baz Web Development: AJAX, Joomla, CSS » Blog Archive » LinkMania: December 3, 2006
03|Dec|2006 1

[...] CSS Bubble Tooltips – Why pull out all that JavaScript for a simple tool tip. Nice and clean. [...]
chandra
11|Aug|2007 2

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
trent
31|Aug|2007 3

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
Jim
11|Sep|2007 4

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!
Jim
11|Sep|2007 5

I adjusted the z-index and now it works smoothly in Firefox. Thanks
trent
11|Sep|2007 6

Hey Jim,

Sorry I just caught your comment. Glad to hear you got it working Ok.
Brian
16|Sep|2007 7

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?
trent
16|Sep|2007 8

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!

Brian
16|Sep|2007 9

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!
trent
16|Sep|2007 10

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.
Brian
16|Sep|2007 11

Awesome. Rock on Trent. Thanks!
Annie
01|Nov|2007 12

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.
trent
01|Nov|2007 13

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!
Annie
06|Dec|2007 14

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.
trent
06|Dec|2007 15

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!
Annie
06|Dec|2007 16

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.
Annie
06|Dec|2007 17

You’re awesome Trent. Much appreciated. Thanks for your help.
trent
06|Dec|2007 18

Anytime!
Markus
17|Jan|2008 19

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?
trent
17|Jan|2008 20

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.
Cathy Marshburn
19|Jan|2008 21

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.
trent
20|Jan|2008 22

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?
Cathy Marshburn
21|Jan|2008 23

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.
trent
22|Jan|2008 24

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.
Cathy Marshburn
22|Jan|2008 25

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.
Cathy Marshburn
22|Jan|2008 26

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.
trent
23|Jan|2008 27

Looks great! Best of luck with the site!
j
31|Jan|2008 28

This does not work in opera (9.25)! Bubbles gets messed up, especialy if bubble should cover another object like table border.
trent
31|Jan|2008 29

You’re right, it it tries to show up but the bubble is screwed up. I wonder if it is a transparency issue??
Sean
06|Feb|2008 30

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.
trent
06|Feb|2008 31

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.
Dale
11|Mar|2008 32

Hi Trent: Thanx for the code. I had to massage it a bit to incorporate both images and text. Cheers dale
Jeff
20|Mar|2008 33

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
trent
21|Mar|2008 34

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.
dom
09|Apr|2008 35

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
trent
09|Apr|2008 36

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.
Sirg
15|Apr|2008 37

Very nice script! I just wanted to say thanks!
Holli
16|Apr|2008 38

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.
trent
16|Apr|2008 39

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)
trent
16|Apr|2008 40

My example is also broken, it tries to work, but breaks, def looks like an issue with Opera.
Owain
16|May|2008 41

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??
trent
16|May|2008 42

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.
Mariusz
28|May|2008 43

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
vasu
04|Jul|2008 44

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
trent
05|Jul|2008 45

make sure your background-position is set to bottom and that the parent element css is position: relative;
Ken
23|Aug|2008 46

Is there a way to change the font?
trent
23|Aug|2008 47

Yes, in the CSS change the font or font-family setting
dannyb
10|Sep|2008 48

Any joy with working out the Opera issue Trent?
thboob
16|Nov|2008 49

I 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
17|Nov|2008 50

By 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
09|Dec|2008 51

I’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
09|Dec|2008 52

Sorry I missed the link
Andi
09|Dec|2008 53

Hi

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
10|Dec|2008 54

Can 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
10|Dec|2008 55

Hi 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
11|Dec|2008 56

Hi 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
12|Dec|2008 57

Yes, 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
15|Dec|2008 58

Thats why i love CSS .. it’s too simple ..

thanks man ..

all the best,
DaRK mAN306
Camilo Olea
15|Jan|2009 59

Hi 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
15|Jan|2009 60

Hi, 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
16|Jan|2009 61

Hey 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
16|Jan|2009 62

Did that, worked like a charm!

Thanks trent! Great stuff!
hienduchuynh
09|Feb|2009 63

Hi, 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
05|Mar|2009 64

Hi 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
03|Apr|2009 65

Sorry, 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
03|Apr|2009 66

A 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
04|Apr|2009 67

When i need position: relative then my layout crashed. But i have found another alternative.
Thank you for your fast answer.

Greetings
Gockel
Mike McD
15|Apr|2009 68

Your 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
15|Apr|2009 69

No 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
17|Apr|2009 70

Howdy 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
17|Apr|2009 71

Oh yes, and your zip downloads aren’t there any more. I got the code from your page though, as Mike did.
Ash Brown
17|Apr|2009 72

Hey 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
19|Apr|2009 73

Sorry, 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
19|Apr|2009 74

It looks like only one image, did you get the other image? There should be two with this tooltip example.
Ash Brown
21|Apr|2009 75

Hi, 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
23|Apr|2009 76

FYI (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
24|Apr|2009 77

Thanks 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
06|May|2009 78

hi,

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
06|May|2009 79

Do you have both images for the bubble? There is a full bubble image and a thin filler image.
Axel
08|May|2009 80

Hello,

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
10|May|2009 81

Hi Axel, just a quick check, do you have both background images?
Axel
10|May|2009 82

Hello trent,
yes the tooltip displayed correct. But outside table the overlapping part is hidden.
Ben
11|May|2009 83

Hi,

I just wanted to download the source but the link doesn’t work.
Does anyone know where to download it?

Thanks Ben
trent
12|May|2009 84

Sorry, 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
12|May|2009 85

Download should now be fixed!
Jim
27|May|2009 86

Hi 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
27|May|2009 87

Ok,
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
27|May|2009 88

Hey 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
27|May|2009 89

Hi
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
27|May|2009 90

Hi
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
27|May|2009 91

try placing the tooltip code before the [img] tag instead of after
Jim
28|May|2009 92

Hi 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
01|Jun|2009 93

Exellent css.

Is it possible to make bubble pic more transparent and text to remain opaque ?

thanks
trent
05|Jun|2009 94

Yes, you might try using a transparent background image, like a gif or png.
cvele
05|Jun|2009 95

That is a one way. And with css?
Priscilla
19|Jun|2009 96

Love 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
19|Jun|2009 97

URL didn’t show up. Hope this works.
[http://www.priscillachristian.com/hop/pages/dog_training.html]
trent
19|Jun|2009 98

Priscilla,
Try making sure the parent elements have a position: relative, that way the tooltips absolute position will be relative to the parent element.
Priscilla
19|Jun|2009 99

Thanks 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
24|Jun|2009 100

Hey 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
26|Jun|2009 101

I just discovered this wonderful creation of yours Trent! What a wonderful thing you have here, I thank you for sharing and inspiring ideas!
meenal
30|Jun|2009 102

Hi,

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
30|Jun|2009 103

Meenal,

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
30|Jun|2009 104

Hi 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
30|Jun|2009 105

I 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
01|Jul|2009 106

[...] CSS Bubble Tooltips is a nice and easy customizable non-javascript [...]
Craig
05|Jul|2009 107

Hi 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
07|Jul|2009 108

hi craig,

did u encounter any image problems in IE8 as i have?
Benny
11|Jul|2009 109

Hi. 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
11|Jul|2009 110

meenal – 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
13|Jul|2009 111

Craig,

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
13|Jul|2009 112

Thanks Trent! I’ll try that.
Angus
20|Aug|2009 113

One 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
29|Aug|2009 114

ur the man! thx so much for your hard wrk!!
Dirk
26|Sep|2009 115

Just 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
07|Oct|2009 116

I 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
13|Nov|2009 117

hey 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
UI23LILY
28|Dec|2009 118

You seem to be really professional and your tought just about this post is really superb. Would you continue your work? We would like order some format thesis or dissertation writing from you.

Trent Richardson

CSS Bubble Tooltips

118 Responses

Leave a reply

Great Links

Categories

Donations

Links