Monthly Archives: July 2007

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 :
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 .

getElementsByTagName is not a function

Folks, this post has nothing to do with CSS.

My scripting skills are still in the beginner stage. The only JavaScript library I’ve been using is EJ – Essential JavaScript, which is very small, very readable for a newbie like me, and easy to work with for the very basic DOM manipulation I’ve worked on in projects. It even uses $('someID') as a document.getElementById replacement so I can use the dollar signs like the big boy libraries.

But when a project demands some special effects (like moo.fx or scriptaculous), I thought I could just pull in my favorite library and slide, grow, shrink, whatever, without any hiccups. Not so. I found jquery, and tried to plug it in and use alongside my existing scripts. That’s when I noticed some “getElementsByTagName is not a function” errors.

It turns out that my use of $('someID') was the culprit. jquery’s use of the dollar sign is much more involved than EJ’s, and it was causing some hiccups. So I changed the EJ “library” to use getId('someID') instead of the $. Now it’s still more efficient (at least as far as me typing it out) than using document.getElementById, and I get the benefits of using jquery where I need it, too, with no more conflicts (yet).

As I grow more familiar with jquery, I look forward to making better use of it, and eventually exclusive use of it. In the meantime, I’m attempting to get the best of both worlds – a powerful library that I don’t understand vs. a less efficient library that I “get” (no offense to Robert Nyman about the efficiency remark).

This post comes at a time when jquery has just announced a new version (1.1.3), and I am expecting Pro JavaScript Techniques by jquery’s author any day now from Amazon. I so look forward to understanding all this.