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 (5)
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.
Posted July 12, 2007 6:49 PM | #
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?
Posted July 12, 2007 7:02 PM | #
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?
Posted July 16, 2007 2:47 AM | #
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.
Posted September 3, 2007 8:24 PM | #
@Anonymous:
Excellent points. Thanks for sharing.
Posted September 3, 2007 8:44 PM | #