Post Archive
› January 26, 2006
Bubble Tooltips
Nearly two years ago over at pro.html.it
I wrote an article on how to build pure CSS tooltips and then spice them up
with a little DOM to ensure semantic use of the title
attribute. Recently I was playing with a variation, a nearly
pure Javascript+CSS approach where the tasks assigned are more clearly
separated: interaction to javascript, presentation to CSS. So the new article
on Bubble Tooltips was published this week in italian on Pro,
and I'm presenting here a translation for the international audience.
Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. Before we begin, here it is the example: just roll over any link to see them in action. They operate this way:
- A check for DOM support is performed
- If found, the
titleandhrefattributes of links are extracted from the page and they're injected into a DOM structure - When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed
Installation and customization of Bubble Tooltips is quite easy. They are composed mainly of four parts:
- A small javascript file of about 2Kb
- A small CSS for their presentation
- A single image in gif format for their graphics
- Four lines of HTML in the
headsection of the page(s)
The javascript, the CSS and the image just have to be copied in the
same directory of the page and with the default presentation don't need
changes. The lines that should be inserted in the head section
are the following:
<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>
A very important note: the CSS for the tooltips, named bt.css is added dynamically by javascript only if the browser is found to be DOM-capable. If you're going to modify the file, just be sure to keep its name.
A feature that I thought might be useful is the ability to add the
tooltips just to a particular section, identified by an id. So here is the second example, where the tooltips are added just to the main content
section, namely the div id="content". As you can see, tooltips are displayed only
on the left column. The changes from the first example are
very minimal, here are the needed lines in the head section:
<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>
On the third line I've put in bold the only part that should be modified
to fit your needs - it is the id (between quotes) of the element that will
contain tooltip-powered links.
Now let's look more closely at how tooltips works. A sort of invisible markup is added to the page with the aid of the DOM when the mouse rolls over a link. The generated markup is like this:
<span class="tooltip">
<span class="top">title of the link</span>
<b class="bottom">url of the link, max 30 chars</b>
</span>
Each of these span and b element are by default
rendered block-level, and the tooltip is positioned by javascript according
to the mouse position. The rest of the CSS is fairly simple and uses a single image:
.tooltip,.tooltip *{display:block} /*added by javascript*/
.tooltip{ width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}
.tooltip span.top{padding: 30px 8px 0;
background: url(bt.gif) no-repeat top}
.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
background: url(bt.gif) no-repeat bottom}
For your convenience, I've prepared a small page with a permanent tooltip in the markup so it would be easier customize the apperence with CSS. When you're done, just be sure to name the CSS file "bt.css". Another thing to notice is that a light bit of transparency is added to the tooltips by javascript: it works in IE from 5.5 on, Firefox and Safari.
Finally a few words on compatibility: bubble tooltips are unobtrosive and for browsers with bad DOM support or javascript disabled, the plain title of links will be displayed. Compatibility is quite good: they've been tested with success in IE5, IE5.5 and IE6 on Win, Opera 8.5, Safari 2.0 and Firefox 1.5. You may download examples, code and graphics in zip format. Enjoy!
Comments
1. January 26, 2006 11:53 PM
2. January 27, 2006 01:22 AM
Dustin Diaz Posted…
Well, at least the improvement is that neat looking image. I put together a library just a couple of months ago called Sweet Titles from which I felt did exactly what people are looking for in a tooltip.
3. January 27, 2006 01:36 AM
Emiliano Posted…
The only "problem" I see with this is that last link in the BubbleTooltips.html example page(More Nifty Corners). Being close to the end of the page the tooltip appears halved both on Firefox 1.5 and IE 6...should add a position check to move the tooltip if needed, maybe.
4. January 27, 2006 03:55 AM
Ryan Adams Posted…
Looks great, I agree with Emiliano, some window frame collision checks are required (dreaded horizontal scrolling appears on small windows when the link is near the right edge).
5. January 27, 2006 04:06 AM
Alfdesign Posted…
Very nice article.
I will use it at my projects.
.. but the backgroud image should be preloaded in some way.
6. January 27, 2006 04:34 AM
7. January 27, 2006 07:27 AM
Marty Posted…
That is quite good work, i know some pretty tooltips with Java Script, but this is the best.
8. January 27, 2006 07:29 AM
9. January 27, 2006 08:30 AM
Pauly Posted…
nice looking but I'm sticking with Dustin's sweet titles, and some tweaks to it I made myself... I think it's less intrusive too. Could be my lack of graphics skills making me biased though...
10. January 27, 2006 08:50 AM
11. January 27, 2006 08:55 AM
Tom Posted…
What do you think of the "overlib" libray (http://www.bosrup.com/web/overlib/) ?12. January 27, 2006 09:59 AM
13. January 27, 2006 10:04 AM
Sapphire Posted…
I'm guessing this doesn't function in Wordpress or .php files?14. January 27, 2006 11:40 AM
JD Posted…
OverLib is bigger and not as cute...but it does offer some functionality that specific uses may need. For example, if you need multiple links inside a tooltip, OverLib is your friend.
I use OverLib (intranet...sorry) in complicated process manuals that require users to make choices about the correct version of a specific document they need for their project. I couldn't use either Bubble or Sweet for that application. I will however, find a way to use one of these for another project!
15. January 27, 2006 11:49 AM
Nobodyman Posted…
Wow. Very, very nice looking. I really like the effect, and it doesn't come off as excessive or flashy.
My only suggestion/question - would it be possible to add some conditional logic that prevents the tooltip from extending past the window boundaries? Another nice touch would be to horizontally flip the bubble image for links on the right side of the window.
16. January 27, 2006 11:59 AM
17. January 27, 2006 12:33 PM
El Servas Posted…
#16: You have to click on the "Example" link to go to the Real Example page.18. January 27, 2006 01:11 PM
Posted…
Will this work in IE when there are select boxes behind the popup? Normally with dhtml popups they will bleed through..
19. January 27, 2006 01:15 PM
Posted…
Did a quick test and it doesn't work...this is the only thing keeping me from using this :/
20. January 27, 2006 02:22 PM
21. January 27, 2006 05:25 PM
22. January 27, 2006 06:13 PM
23. January 27, 2006 10:45 PM
Kevin Burton Posted…
Yeah.... Doesn't work on FireFox 1.5 on my Mac either... Hm....... I sooo want this though :)
24. January 28, 2006 01:02 AM
Ivan Minic Posted…
Great tutorial! :)25. January 28, 2006 03:04 AM
Owen W. Posted…
I am using firefox 1.5 on mac and it works fine. For those with problems, make sure you are checking the actual example page and not the intro page. The wording is a bit confusing...
26. January 28, 2006 04:55 AM
m3nt0r Posted…
Hi, i am actually using it on my site and ran into alot trouble with anchors (they don't have href attribute!
i tried to fix that by using el.hasAttribute('href') and checking for propetiary Internet Explorer with el.href != '' && el.href != null. I also extended it to bubble on acronyms (feel free to copy).. anyways:
Now it is working everywhere (FF1.5,prolly NS), but at my index.php/Home within IE i get an error. This is an Internet Explorer related issue only (object not supporting method, but as always the debugwindow of IE says nothin plus the wrong line.. lol.
Please help me on this one.
27. January 28, 2006 05:30 AM
M3nt0r Posted…
N/m .. i fixed it.. forgot to initialize my new variable in the second line :)
Thank you for this wonderful script!
28. January 28, 2006 08:20 AM
Stefan Born Posted…
Very nice. I played around with ugly but fixed tooltips a year ago. Maybe someone is interested.
29. January 29, 2006 04:05 PM
30. January 29, 2006 05:58 PM
31. January 29, 2006 07:47 PM
joanne Posted…
Thank you very much for this. Super easy to implement, and it looks great.32. January 30, 2006 09:09 PM
rob Posted…
Could someone tell me how to change the opacity to darn near opaque? Mine is so see thru that the text on the tooltip mashes with the text underneath and you can't read a thing. I tried putting the opacity at 100 and at 0 and neither worked. Any help?33. January 31, 2006 08:19 AM
Kevin Cannon Posted…
Rob, just edit the setOpacity function in the Javascript file, and setthe value to what you want it to be
Great script, agre with the minor modificans to not work on anchors, and the window boundary stuff.
34. January 31, 2006 11:46 AM
Fuze Posted…
Is there a way to disable the link from appearing in the bubble popup? I want to just have the title text appear without the link text (looks trashy with long links). Otherwise, this is way cool!
35. January 31, 2006 12:25 PM
Fuze Posted…
Sorry that I double posted, but I thought of something else that would be cool....Is there a way to have this work on only specific links. For instance, I want to only have tooltips on links that have a particular ID or CLASS. Gives a little bit more control than having every link popup the tooltip or even the every link in a particular div. Anyhow, let me know if that is an easy tweak and how I would go about doing that. I WANT THIS TO WORK, very cool script.
36. January 31, 2006 01:08 PM
Nate Posted…
Fuze, I was able to remove the link by commenting out three lines in the JS with /* and */ like so:
/* l=el.getAttribute("href");
if(l.length>28) l=l.substr(0,25)+"...";
b.appendChild(document.createTextNode(l));*/You'll want to accommodate for instances where there is no title. Currently the JS outputs "link:", but since you'll have no link, you'll want to use something else like "Click for more info" (or better yet figure out how to make the whole tooltip not show up).
Regarding having the tooltip show up on only some links, check out Alessandro's second example, which shows how to limit it to only certain containers. The second example is referenced in the main text of the post, and has an example page.
37. January 31, 2006 09:50 PM
Rob Posted…
"Rob, just edit the setOpacity function in the Javascript file, and setthe value to what you want it to be"Yes, thanks...I did try that. The opacity seems to stay the same no matter what number I use. Driving me crazy! Other than that, I really like how this looks. Great little script.
38. January 31, 2006 10:09 PM
Rob Posted…
I just took all references to opacity out of the script, and my balloon is still totally see-thru...hah. T'is a puzzlement.
39. February 1, 2006 04:59 AM
Andrew Posted…
Thanks a lot! . Just last week i was looking for something like this, your code - the best!
40. February 1, 2006 10:43 AM
Fuze Posted…
Nate, I did check out Alessandro's second example in order to limit it to only certain containers. This is great if you want every link in a div to have tooltips. However, I have multiple links in a container, some which need to have tooltips, some that don't. I tried putting a span with an ID around just the links that I want a tooltip for but it only works on the first instance and ignores the other ones.
So, I'm hoping someone can figure out how to make it apply only to links with a certain ID, or to ignore tags that don't have a title attribute. Anybody up for the challenge? Please help!!!! Thanks!
41. February 1, 2006 11:17 PM
42. February 3, 2006 12:25 PM
43. February 4, 2006 01:22 PM
44. February 5, 2006 09:02 PM
KJ Posted…
Not sure what the issue is, but the bubbles seem to be broken in Safari Version 2.0.3 (417.8) on Mac OS 10.4.4. The bubbles flicker on and off as I move the cursor over each link on the example page...
45. February 8, 2006 04:53 PM
Marco Posted…
Great work! Today I have implemented this for my link page at my weblog and it looks great! Marco46. February 9, 2006 09:55 AM
Neil Posted…
Any chance of getting a little help with this awesome scrpit to work with PHP? Neil Hyde - graphics@thetowncryer.net
47. February 9, 2006 11:13 AM
Adam Posted…
Hiya, I feel like a bit of an idiot here. By insert into head I'm assuming between and , so, using K2 I inserted it into header.php as mentioned above. I uploaded the three files into the same directory (the K2 theme folder), but still nothing. I've tested it with several browsers and would really like to get it to work so, any help would be greately appreciated. Thanks...
48. February 9, 2006 09:04 PM
Anand Posted…
Great Script. I agree with the others that a window collision routine would be ideal. I did have a question in regards to making mods. I played with Sweet Titles and I noticed that you can include XHTML markup within the title itself to create a richer tool tip. Does anyone know how to do that here? Or has anyone played around with it? I really like the style of this tool tip, but I would like to break my tip over multiple lines and be able to bold key words.
49. February 11, 2006 05:33 PM
jim Posted…
Anyone else having trouble getting this to work in IE 6 when used with images that are also links? The tooltip appears behind the image instead of in front of it. Driving me nuts, it is...
50. February 12, 2006 08:50 AM
john h. Posted…
I am looking for a tool tip that will do two complicated things;
51. February 12, 2006 12:12 PM
52. February 13, 2006 08:26 PM
53. February 14, 2006 05:08 AM
Amit Posted…
Im getting the same problem as Jim posted...The tooltip works great in Firefox but in IE refuses to stay above the image...always below...any ideas how to fix this? I dont really want to use another tooltip...this one works so well with my site...
54. February 15, 2006 12:03 PM
Grady Posted…
if you want the tooltip not to show up when the title tag is empty or nonexistant, change
if(t==null || t.length==0) t="link:";
to this :
if(t==null || t.length==0) return;
Then it will only show up if the title tag is there with text.
hope that helps
... props to Mr. Sweeting for the assisting me ...
55. February 17, 2006 10:05 AM
56. February 27, 2006 01:34 AM
gmcms Posted…
Hi all, is there any simple way to hack the code with the objective of having all the titles attributes becoming tooltips, not only for "a" tags ? Thanks
57. February 27, 2006 07:05 AM
58. March 5, 2006 11:15 AM
david Posted…
Grady: thanks for your addition. I think that the developer of this script should add your modification as a permanent improvement. from a site maintenanace perspective, your fix is much better than assigning a CSS class to only certain elements to enable the tooltip. thanks so much for sharing, you've saved me a lot of time.59. March 5, 2006 09:17 PM
60. March 14, 2006 06:06 AM
Nigel Posted…
Just to throw my tuppeny worth in.The script is fantastic!
I also wanted to be able to apply the tooltips to more TAGS than just links, so I made the following modifications to allow me to specify the tags to show tooltips for.
In BubbleTooltips.js
i) Added a parameter to 'enableTooltips', becoming:
enableTooltips(id, tag)
ii) Replaced the lines:
if(id==null) links=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
--- WITH ---
if(id==null) {
if(tag==null) links=document.getElementsByTagName("a");
else links=document.getElementsByTagName(tag);}
else {if(tag==null) links=document.getElementById(id).getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName(tag);}
The script can be called by: enableTooltips('content','input'); or enableTooltips(null,'input');
61. March 17, 2006 04:42 AM
DA Posted…
It is quite nice. However, do you know how to set more than one tooltip? To hover on a word, have for example 3 tooltips with one link each, and choose one. I have seen overLIP but...uff... Thanks
62. March 18, 2006 11:41 PM
ig Posted…
Hey, this looks like something I can put to very good use.
I looked through the javascript code and it appears that the contents of the tooltip are set by the variable called 't'. Can this contain HTML? The application I have in mind involves making AJAX calls (using Prototype, of course) to asynchronously load the contents of the bubble as it appears. Does this sound feasible?
63. March 19, 2006 04:03 PM
64. March 22, 2006 04:25 PM
Lesjirvin Posted…
Is it possible to control font weight and color within the tooltip? For example, can I make selected words within the tip a different color, size, or weight?
65. March 23, 2006 01:02 PM
66. March 23, 2006 08:36 PM
FloB Posted…
Hi. Is there a way for the bubble to point to an image, say a photo, instead of a link so that when you hover over the photo, the bubble points to the image?
67. March 31, 2006 07:47 PM
Sparky Posted…
Hi. I have made a variant of Alessandro's work for those of you wanting to include HTML elements such as images and different colours in the tooltips etc.
68. April 11, 2006 12:02 PM
Dan Wilson Posted…
I have another script which relies on the onMouseOver event. When I use these two scripts together, the second script fails. I tried changing the order in which the scripts were called, but there was no difference. What do I need to do to allow both scripts to catch and handle the onMouseOver effect?
69. April 17, 2006 05:32 AM
70. April 19, 2006 12:08 PM
Pushkar P Posted…
Hello. Thanks for the tip. I added the script tp my blog and ran into an error (line 31, variable l) I added the following line to check if "l" was null or zero..l=el.getAttribute("href");
if(l==null || l.length==0) l="ADDEDDUMMYVALUE";
if(l.length>30) l=l.substr(0,27)+"...";
b.appendChild(document.createTextNode(l));
71. April 19, 2006 12:24 PM
Pushkar P Posted…
I htink the link to sparky's page is i this http://sparky.orsl.co.uk/dev/tt/ ... without the www :)
72. April 19, 2006 04:01 PM
Sean Posted…
Very nice and thanks for the tip. However, I ran into a problem when the title="very long string" I mean very long, the buble image broke. The image is not large enough to hold all the text in a string. Another thing is that the Bubble shows behind a dropdown box. Does anybody know why or how to fix it?
Thanks.
73. April 28, 2006 02:36 AM
Posted…
Please put your comments in paragraph tags, no auto-line-breaking anymore.
sdfsdfs74. May 2, 2006 11:49 AM
Michel Jansen Posted…
Love the simple approach! Integrated Bubbles into my website on the fly!...... On the Dutch site... Working on the English pages......
75. May 3, 2006 01:27 PM
Clay Kaytis Posted…
I'm trying to incorporate this in to my Wordpress site. I'm using asides that only display the title and I'd like the tooltips to show the excerpt of the post so readers can get a quick idea of what it contains. It's working as I had hoped except for a couple things:
The excerpt always displays the p tags at the start and end. I've tried using strip_tags in my php code, but the p tags persist.
Also if the excerpt is too long it breaks the bubble. I can get in to the habit of making shorter excerpts, but is there a way for it to grow if the text is longer?
Thanks
76. May 4, 2006 09:17 AM
carlton Posted…
This is great. But what if I want to apply tooltip to non-links like certain text. I want to add bubbles to different cells in my html table, where some cells are text and some are dropdown (select option).
HTML tooltip on dropdown does not work with IE. When I found this I just love the look and feel and everything else.
But how about apply to table cells that are not links (like text and select option)
thanks
77. May 11, 2006 02:18 AM
Sangeeth G. K. Posted…
That was quite concise, helpful and encouraginging. Thanks a lot.
78. May 12, 2006 09:22 PM
79. May 13, 2006 01:27 AM
Samantha Posted…
The instructions are kinda iffy for a wordpress plugin.Saying to put files on a page makes no sense.Should these files be put in the plugins folder or where?
80. May 14, 2006 02:08 AM
Ryan Vo Posted…
Alessandro Fulciniti, Great work! I made some changes to the code(disable tooltip if there is no title, more changes...) and used it in one of my projects, Thank a lot. By the way, the code is credited to you.
81. May 14, 2006 05:21 AM
Damaris Posted…
Hi you all, would you know how to apply this approach for more than one tooltip?.
82. May 16, 2006 04:59 PM
Jessie Posted…
Please put your comments in paragraph tags, no auto-line-breaking anymore.
ummmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm what am i supposed to comment?83. May 20, 2006 12:27 PM
T3H L33T H4X Posted…
You guys actually think this is good. Only a noob wouldn't know this. This is like the first thing that shows up in a css book or tutorial
84. May 20, 2006 03:53 PM
Jeremy Posted…
This is fantastic, the only problem is that has anyone else noticed that when the tooltip pops up and their is a downdown that the tool tip shows up behind the dropdown when in IE?
Any ideas for a fix?
85. May 24, 2006 01:40 PM
nicmar Posted…
Yo! Nice script. I've figured out how to get HTML in the TITLE-tag to be visible. It only took 2 hours :D
It was a very little modification! Change this line:
s.appendChild(document.createTextNode(t));
to these:
var oDiv=document.createElement("DIV");
s.appendChild(oDiv);
oDiv.innerHTML = t;
Now try adding HTML-code in the TITLE tag, neat huh!!? :)
Maybe it can be done in some other way, and maybe other things can be removed. I'm not a DOM-programmer, although it's very interesting.
Thanks Allesandro for a great alternative to overLIB which was to big/complicated for this simple task.
86. June 9, 2006 12:52 AM
moneybagsxp Posted…
If you want to use nicMar's example above, and use bbCode-like in your TITLE attribute, add on to t=el.getAttribute("title") to be t=el.getAttribute("title").toString().replace(/\[\[/ig,''); This can take tags like [[br]] and [[b]]make this bold[[/b]] to be HTML, without placing < and > inside the attribute.
87. June 9, 2006 12:54 AM
moneybagsxp Posted…
Whoops...missed it in the preview. Like this:
t=el.getAttribute("title").toString().replace(/\[\[/ig,'<').replace(/\]\]/ig,'>');
88. June 12, 2006 07:06 PM
WIKERNUT Posted…
AWESOME script, i would love to get this to work with images - with image maps..... is there a way??? anybody?
89. June 14, 2006 12:52 PM
My Pet Programmer Posted…
Worked like a charm, thanks a million for posting it.
I did hack it up to take out the link portion on the bottom, didn't need that part, maybe making it optional somehow in the script would work, but hey, it's a free solution, so who's complaining?
Thanks again!
90. June 14, 2006 04:13 PM
Geo Posted…
Can you post your hack?91. June 15, 2006 02:47 AM
baker Posted…
nice work, well done! :). i got tiny question, how to make an image appear inside the buble instead of text?
ripp Posted…
You must be psychic. I was just today wanting to do something like this on another site. I love you, man!