Welcome to the MacNN Forums.

besson3c · Sep 9, 2006, 09:09 PM

Has anybody found some CSS based tooltips that actually work in Safari so that there aren't strange clippings?

I'd hate to have to use Javascript based tooltips just because Safari can't cut it.

registered_user · Sep 9, 2006, 10:10 PM

I haven't found any. But I've made some. Safari is never the problem, it's IE6.

besson3c · Sep 9, 2006, 11:20 PM

Originally Posted by registered_user

I haven't found any. But I've made some. Safari is never the problem, it's IE6.

Safari definitely has some issues that have been reported, and I was struggling with them this afternoon. I ended up going with Javascript tooltips, because no matter which CSS tooltip I tried I always ran up to the same problem. The basic problem is that in certain contexts, significant portions of the tooltip text triggered by the :hover pseudo-class are clipped.

registered_user · Sep 10, 2006, 10:30 AM

I'm willing to bet that the problem isn't with Safari.

besson3c · Sep 10, 2006, 10:58 AM

Originally Posted by registered_user

I'm willing to bet that the problem isn't with Safari.

I'm willing to bet it is. They work fine in Gecko, and this problem has been widely reported.

What do you base this statement on?

besson3c · Sep 10, 2006, 11:22 AM

Want to see the problem in action?

Pure CSS Tooltips

Mouse over "This is a tooltip" in both Safari and Firefox and see the difference. I have not yet found a CSS based tooltip that does not do this in Safari.

registered_user · Sep 10, 2006, 04:45 PM

I wouldn't have believed it had you not linked to it. Because the links are display: inline, a bug is triggered.

If the parent element is display: inline-block, it works fine in Safari though. How very odd.

I didn't believe it because compact.org's calendar has 'em and they work fine in Safari. But sure enough, it's a Safari bug alright!

I stand corrected! I was thinking that it would be an IE issue since IE has such poor support for the hover pseudoclass.

besson3c · Sep 10, 2006, 04:56 PM

Originally Posted by registered_user

I wouldn't have believed it had you not linked to it. Because the links are display: inline, a bug is triggered.

If the parent element is display: inline-block, it works fine in Safari though. How very odd.

I didn't believe it because compact.org's calendar has 'em and they work fine in Safari. But sure enough, it's a Safari bug alright!

I stand corrected! I was thinking that it would be an IE issue since IE has such poor support for the hover pseudoclass.

I played around with it, and was able to reproduce the problem display:block, IIRC... I'm not sure if this bug is related to the parent element, but I could be wrong.

What are the eventhandlers for those calendar dates doing on compact.org?

registered_user · Sep 10, 2006, 10:10 PM

It looks like they're making the tool tips work! :o

wow, I thought that was CSS.

so uh... I guess... uh... I'm eating crow.

at least I learned a little something in the process!

besson3c · Sep 10, 2006, 10:23 PM

Originally Posted by registered_user

It looks like they're making the tool tips work! :o

wow, I thought that was CSS.

so uh... I guess... uh... I'm eating crow.

at least I learned a little something in the process!

It just goes to show you that Gecko is still the most standards compliant browser out there.

registered_user · Sep 11, 2006, 06:44 PM

heh. the whole thing irks me. I know I've done it with block level elements, the inline elements took me for a ride.

and I looked at that calendar again, and it works fine -- unless you set the links to display inline. The event handlers are for IE.

I grabbed that calendar and set the links to display inline: Calendar sample the bug appears. (nab the source and remove the style declaration in the <head> and its fine -- without any js

So I guess it all comes down to the parent element. And uh... either make the parent inline-block, block, or resort to javascript.

And while Gecko might have its plusses, I have yet to find a flavor of it that I like using.

besson3c · Sep 11, 2006, 08:08 PM

Originally Posted by registered_user

heh. the whole thing irks me. I know I've done it with block level elements, the inline elements took me for a ride.

and I looked at that calendar again, and it works fine -- unless you set the links to display inline. The event handlers are for IE.

I grabbed that calendar and set the links to display inline: Calendar sample the bug appears. (nab the source and remove the style declaration in the <head> and its fine -- without any js

So I guess it all comes down to the parent element. And uh... either make the parent inline-block, block, or resort to javascript.

And while Gecko might have its plusses, I have yet to find a flavor of it that I like using.

Firefox becomes much cooler when you download some plug-ins you like to enhance your workflow. It earns its bacon in capability more so than OS X user experience.

registered_user · Sep 12, 2006, 08:07 PM

yes, that's true. and I have a tricked out version of FF just for troubleshooting CSS and javascript.

but that's all I use it for.

besson3c · Sep 12, 2006, 09:32 PM

Originally Posted by registered_user

yes, that's true. and I have a tricked out version of FF just for troubleshooting CSS and javascript.

but that's all I use it for.

Just out of curiosity, what extensions has an advanced user such as yourself found useful and/or invaluable?

exca1ibur · Sep 13, 2006, 03:50 AM

Originally Posted by besson3c

Just out of curiosity, what extensions has an advanced user such as yourself found useful and/or invaluable?

No web developer should be without...
Web Developer

registered_user · Sep 13, 2006, 07:32 PM

Web Developer, FireBug, View Source Chart, HTML Validator (Tidy), and Search Status are what I use.

and iFox Smooth theme.

I have DOM inspector installed too, but I don't remember what it does. And Firebug can be a little fussy.