Mobile Friendly Website


Doing it with style

balloons COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

I love the way you keep coming up with these, and then expanding on them even further.
I'm constantly trying to think of pages I can use, just to cram in as many of your techniques as possible!
Another excellent technique - keep up the good work.
(24.04.2006, 15:01)

Great work, wish there were better images to use.
(30.04.2006, 13:54)

Bob, if your site is better then why not put it here instead.
(30.04.2006, 21:38)

well done on the information balloon pop ups, i'm really liking it and thinking about using it for myself as well!

although i'm having a bit of a problem, i seriously do not know what it is, adjusting the script to my needs.
to be honest, i think it's just a very minor issue, but it seems i can't get behind it myself. so please stu, if you have some time left, have a quick look at it and tell me how to change it.

that's the link:

my problem is that below the last sentence, " if you like my work, please do not hesitate to contact me -- who knows the next project could be yours?!", there's so much empty space.
i've looked into the html and both css files (balloons.css and cssplay.css) but haven't found anything how to minor that space or get completely rid off it...

i'd really really appreciate it, if you could tell me what it is.

thankfully yours,
(02.05.2006, 21:37)

Theresa, Ihave had a quick look at this and found that you are missing <body></body> tags and you are loading the IE only style sheet into all browsers.
This should be loaded into IE ONLY using conditional comments.
I am not sure what you mean by so much empty space below the last statement. This space is not being controlled in any way and is due to the flow of the markup and style, and also by the resolution of the screen.
If you get rid of this space then the last sentence would be at the bottom of the screen and there would be a lot of white space above it.
(02.05.2006, 23:15)

I was wondering whether it is possible to create something in css similar to the link advertising you have on your messageboard (contentlink advertising) to use as a glossary for a website?
(08.05.2006, 15:02)

Clive, it is certainly possible but for Internet Explorer the words would need to be links for :hover to work.
(09.05.2006, 16:22)

Nice, and what i've been looking for but it doesn't seem to work in ie6. The head and footer graphics show on the first mouseover then are missing on the rest.
(15.05.2006, 13:34)

Thanks for the thumb for fadtastic, it is a screenshot of an article I did about Rodchenko and design.
(25.05.2006, 13:04)

hi, Stu
is there a way to produce this balloons over a text. what change must be done?
(06.07.2006, 14:29)
Stu, Many, MANY thanks for the work you've done and offered to the public. I've used your balloon pop-ups on our personal website ( It took a little tinkering, but with you carving out the path the rest was pretty easy. Again, THANKS!
(11.07.2006, 23:29)

I am trying to copy the top.gif, top1.gif etc. from the information balloon popups but i only can copy the bottom ones (bottom1.gif etc.), what should I do?
(12.07.2006, 16:04)

I'm trying to integrate this idea on my site, but with text links vs. image links, and have been having problems getting it to work. Basically, after taking out the code I think should be taken out, it stops working in IE. Is this even possible? Thanks!
(27.07.2006, 01:02)

i need to display a tip tool box containing information using div and without dt ,dl,dd is it possible . please mail me to
(10.09.2006, 06:42)

How do I obtain the images used for/in the balloons?

Thanks and great Job Stu
(08.11.2006, 14:16)

Great work Stu!!! I would like to use this idea on a personal web page but would like to use image maps instead of images. Is that possible?
(30.01.2007, 17:01)

I am new to balloon pop ups. I would like to implement them over image briefly describing the image (fishing trip). Can you explain how I would use the balloon template to do this? Thanks.
(06.04.2007, 05:35)

Hi Stu,

Thanks for yet again another great css. I am running into one minor problem. It's actually the same problem that Theresa that posted here was running into. I implemented the css but I'm now being left with a lot of extra "white space" at the bottom of my webpage. If you look at my webpage,, it's actually in my case "black space". ;o) Before I added the code the entire page fit nicely onto the screen with just a top and bottom margin of 5 but, now there's all this empty space. When you have some time, would it be possible for you to take a look at my webpage to see if you can see the problem? Thanks, and keep up the good work Stu.

(14.05.2007, 17:26)

Thank you for the wonderful information. However, I'm hoping there is a simple and painless way to apply the balloon pop up to a 'text link'. I was able tweak it a bit, but due to [.balloon ul li dl {
} ]
- any text in the 'dl' is hidden by default.

Any help would be greatly appreciated.
(27.08.2007, 22:44)

How can I popup a Wikipedia’s page, Language selection

I have a page with hyperlinks to Wikipedia references,
I’d like these hyperlinks to popup an auto-adjusted balloon with the ‘Language selection’ that is associated to the Wiki’s page the link referances when hovered over.
The user can either pick the link as-is or go to the balloon and chose the language, click, and the page will appear in a new window.

For example: Apple (the fruit)
On the left side in: “In other languages” there is a list to choose from.

The tags Wiki uses are:

<div id="p-lang" class="portlet">
<h5>In other languages</h5>
<div class="pBody">
<ul> <li><a>link</a>>/li
Snip List <li><a>link</a>>/li
<!-- end of the left (by default at least)column -->

How can I pull this language-list into a popup balloon? (CSS or JS is fine)
(28.09.2007, 03:28)

Hi Stu,

This is a fantastic script and one of my favourite websites, so thank you very much. With the balloon pop-up links, is it possible to have them switch to the left of the object once you go too far right of the screen?
(26.02.2008, 20:38)

Ohil, this is possible but would require an alternative style for left balloon abd pointer.
(26.02.2008, 21:01)

I noticed that when the mouse is moved within the pop-up balloon its content flickers. Why does this happen?
(13.04.2008, 19:03)

Den Gon:-

Having trouble seeing the pop up ballons in old IE. any suggestions?
(24.07.2008, 17:38)

Mim McConnell:-
Can this be used with the Map Hotspots in Dreamweaver? I'm hoping to use this on this page:
(09.08.2008, 03:21)

Hi I would like to use this for the following site I have tried to contact via email, but it is not working. I want to create a map with markers, and use the this pop up. I will make a donation.
(21.02.2009, 01:08)

Hi Simone, my email address stu{at} should not be a problem, but you have my permission to use this demo as long as the copyright comment is kept in the stylesheet.
(21.02.2009, 08:02)

Mark Addinall:-
Stu, great stuff! I am building a different type of TAG cloud for open source where it gives more than one choice of where to go from the tag link. This came about as part of a new demonstration project. A mate suggested a 3-D ontology so I could use a tooltip that has links inside. I can implement it fine on my own. I was just wondering if the graphic files were parked anywhere handy? The project is at
(05.01.2011, 23:37)

Just enter the image path (from the stylesheet) into the address bar, for example:
(06.01.2011, 08:05)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page