Karen asks the CSS Guy about CSS tooltips without Javascript that show on click instead of hover

Karen writes

I am working on developing a reporting form for a mobile device as a part of NASA’s Constellation project and I’m trying to figure out how to do entirely CSS tooltip pop-ups onclick instead of a hover effect, without use of Javascript DOM since it is not supported in IE Mobile 5. I’ve been trying to figure out ways but so far haven’t found a good method. Do you have any ideas?

Yes, I have ideas, but I have no way of testing this in IE Mobile 5.

We could start with a basic CSS hover tooltip example. My first thought is to tweak it to work with :focus instead of :hover.

Here’s a simplified :hover example.

If we just swap out :hover with :focus, we get a method that works in Firefox, but not in IE6 or IE7 (or Safari).

Let’s try :active instead of focus. It works fine in IE7, but not the other browsers.

Let’s combine :active and :focus and see what happens. It works fine in IE7 and Firefox, but not in IE6 or Safari.

In conclusion, not only do I know next to nothing about the mobile world, I can’t find an example that works in all regular browsers consistently. Perhaps you know your target audience well enough that you know you just need it to work in IE5 Mobile and no other browser. In that instance, my only suggestion would be to test one of the above methods to see if they work. If they don’t, I’ve got nothing further to offer, but I would appreciate hearing your results.

If anyone else knows a possible solution, feel free to share.

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.

Jennifer said:
If you set the a.info:focus, a.info:active{display:block;}, it works in Safari (only on the active, not the focus) and IE6 (on both active and focus). Of course, that wouldn’t work for inline links, as it pulls it out of the sentence flow on the click (but only in Safari, the others all keep it inline). It also works in firefox(mac/pc)/ie7, as your example already does.
Who knows about mobile browsers, though.
This functionality is behavioural anyway, which is what JavaScript was intended for. If I were doing it, I’ve have a pretty JavaScript version with the popup, and a click-off version (external page with same content) for JS disabled users/mobile.

Gcyrillus said:
Hello , just come across this site very interesting (french please excuse my average english ).
To have your tooltip working in IE6 (who minds nowdays ? ) , you should set the :
psoition:relative , on :focus and not on link . then you do have this reflow effective .
I guess you just forgot that you need to “awake” in IE6 for effective rollover (like background:transparent or whatever that will force a reflow ).
If you like these funny and useless things , I have once test a menu that is suppose to open and close onclick , css only , and for IE6 of course for the fun or the frustration using it . no tables nor js to have it randomly effective in IE6 :
Of course no one should use it , it’s only for the pleasure to see IE6 being nuts once more .