Mobile Friendly Website


Doing it with style


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

Excellent tool tip, i have been searching high and low on most CSS resources, but this one is so simple and yet has a sexy appeal to it...

I was modifying to to hold pics and content, which it did perfectly. But when i tried including this in a DIV row that had this "overflow: auto;", then it seems to get cut off. in IE it works perfect, but no matter what i try with this little baby to get it to come out over the div content, it just wont work..

Any ideas?
P.S. thanks again for this, its a charm
(11.05.2007, 04:29)

having problems with the tooltip in Opera, there is separation of the DIVs vertically, and the tooltip on the "Boudin" link seems to vanish behind the page image.
(11.05.2007, 09:18)

tig, if you read my information text on this demo you will note that it does not work in Opera. Opera has a problem with :hover on inline links.
Also Firefox has a problem as outlined by Capelton above.
(11.05.2007, 09:42)

thanks Stu,

I appreciate the effort.
(11.05.2007, 15:51)

Sorry Stu, had a 'blonde' moment will read ALL the page in future.
(11.05.2007, 17:14)

Just a nice and light tooltip added on my home page, thanks so much Stu
(12.05.2007, 16:28)

ok i know this is pure CSS - and i dont know if i would be committing a carnal sin to ask if anyone had hacked this with javascript to resolve the firefox and maybe opera issue. Qtip is a cool alternative, but accessibility and SEO maximisation is the priority here.

If anyone has adjusted this with some JS, or something fun, please post, as i would like to see it and experiment.
(12.05.2007, 22:43)

Use display:inline-block for one of the nearest anchestors (in this particular case it is #showcase) to rectify this Opera bug.

(14.05.2007, 11:59)

Hi Stu, this is a very nice css trick! I found one problem however, but also have a fix for it :). If the background color of the link where the tooltip will appear below is not white, the little tooltip.gif image will have a yellow background (#FFFFCC). To fix this I changed this:

a.tooltip:hover b em{
background:transparent url(tooltip.gif) repeat scroll 0pt;

So instead of using a background color of #FFFFFF for the image, it is better to use 'transparent'. The white color in the tooltip.gif image should also be transparent. Hope this helps to make this trick even better. Keep up your great css work !
(22.05.2007, 19:48)

Does this technique solve the form field 'punch through' problem in IE6?
(16.07.2007, 03:03)

forgive my ignorance, but how do you modify the tool tip box to include additional paragraphs and links?

Thank you in advance for any insight or direction.
(19.07.2007, 23:16)

also, could you please tell me how you would keep the hover window open, so someone could click on a link in it?

(20.07.2007, 17:22)

Cardinal, paragraphs are easily added but placing links inside tooltips is a little more difficult, especially for IE6. I will be placing an example of this soon, although as with this demo it will not work with Opera.
(21.07.2007, 11:06)

In Mozilla Firefox 3 Beta 1 in both of your examples, when I hover over "Pissarro"; something extremely unexpected happens. The tooltip appears far away from where it should and flashes in and out extremely fast.

I for one am thankful that I'm not epileptic. =P

Though that aside, I must say amazing work... I've gone through almost every example on your site and some of the things you do with CSS are truly awe-inspiring.
(23.11.2007, 05:36)

great tooltip. looks very nice.
one problem: when i use the tooltip in a html form IE6 has problems with select/options. the tooltip is rendered behind the dropdown list. is there a way to change this?
(12.02.2008, 13:13)


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