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.
Comments (9)
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.
# July 12, 2007 6:49 PM
Kris said:
Hey. Does the use of floats bring in a whole new ball game? I'm trying to do these popups for my client, and they work fine with floats aren't invovled (view screen shot) and get cut off when floats are used (view screen shot).
Anyone have any ideas?
# July 12, 2007 7:02 PM
Ross Bruniges said:
Never one to be defeatist but the fact that the word onclick is used automatically implies the need for JS support doesn't it??
Clearly this is a problem is regard to the specified mobile browser not supporting it but I'd say get back to the drawing board on the idea's you are having - if the content is really important then maybe it should always be available - regardless of hover, active, focus or anything?
# July 16, 2007 2:47 AM
Anonymous said:
Some information: Windows Mobile Device Emulator can help to test IE Mobile 5. It appears that you'll need some virtual network adapters. Microsoft's Virtual PC or VMware Player both provide these adapters and are free (as in gratis, if not libre).
The problem with CSS based tooltips in a mobile browser is simply that there is no cursor to "hover". Movement is generally from link to link with the arrow keys/device, and therefore it is not "nice" or reasonable to do hover tool-tips. The first basic CSS hover tooltip presented on this page actually rendered in-line.
Unfortunately, the IE5 browser isn't (doesn't appear to be) that dynamic. In this case, tool-tips might (unfortunately, but by necessity) be links to new pages that link back to the anchor tag from which they came.
Normally, this would be nasty, but in a mobile browser, one isn't supposed to be inundated with colorful borders, etc. A link to a tool-tip info should (could? Optimally?) be a quick load of a nothing page that renders simply the tooltip text and a go-back link.
# September 3, 2007 8:24 PM
CSS Guy said:
@Anonymous:
Excellent points. Thanks for sharing.
# September 3, 2007 8:44 PM
Lori said:
Here are a couple examples I came across when looking for a simple css solution for text balloons:
http://www.cssplay.co.uk/menu/balloons
http://www.cssplay.co.uk/menu/tooltips
They seem to work pretty well, but listen to Anonymous' advice regarding use of these techniques for a mobile device.
# August 19, 2008 1:54 PM
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 :
http://gcyrillus.free.fr/essai/menu-deroulan-1niveau-compatible-IE-6-sans-js-valide.html
Of course no one should use it , it's only for the pleasure to see IE6 being nuts once more .
Gcyrillus :)
# February 13, 2009 2:11 PM
CSS Guy said:
@Gcyrillus:
Thanks for posting your tip!
# February 13, 2009 2:28 PM
Website link Directory said:
Excellent topic. I was looking this kind of tool tip.
Thank you.
# August 14, 2009 6:52 AM