|
|
CSS based Safari compatible tooltips?
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
I haven't found any. But I've made some. Safari is never the problem, it's IE6.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
I'm willing to bet that the problem isn't with Safari.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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!
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Location: Oakland, CA
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|