Tooltips 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}cssplay.co.uk.

Post a comment

Current posts

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

Capelton:-
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)

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

Regards,
Uwe
(14.05.2007, 11:59)

Steven:-
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;
display:block;
font-size:1px;
height:6px;
left:20px;
position:absolute;
top:-6px;
width:11px;
}

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)

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

Cardinal:-
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)

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

thanks.
(20.07.2007, 17:22)

Stu:-
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)

Joe:-
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)

Markus:-
hi,
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)

10 of 15 comments (part 1). [ » ] [ * ]

Post

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 'https://'