On Aug 22, 2006, at 14:50 , Morbus Iff wrote:
* JS events, such like <p onmouseover="tooltip_on('you're hovering!')" onmouseout="tooltip_off()">Whee!</p>. I tend to like this one (and implemented it in my game.module, not via jQuery though) the most because it a) doesn't pollute the DOM, b) don't harm screen readers, Screen readers need to see the content you display on hover too.
In my particular case, the information on hover was of little import - it was a foreshadowing of what they'd be clicking on, such that there was no loss of inaccessibility - someone could just click the link and get (even more) of what the hover was actually talking about.
With that said, of the four options I described, you probably most like the the <div> one with IDs. But where would you put those? Putting them right next to the text ruins readability of the main text, and putting them at the end of the page removes any sort of context.
I'm a little late to this party, but I have to chime in to support a nested DOM element solution. There is no negative effect on screen readers. In fact, screen readers will likely not read display:none text anyway[1], so unless you specifically want the text read the behavior is probably already what you want. To make sure, you can add speak:none to suppress speech or speak:normal to enforce it. These rules can be in a separate media="speech" stylesheet if you wish. The benefits of the nested model are the same as when designing any document structure for CSS layout. Maximizing the usefulness of the cascade is a win for both CSS and jQuery, and for jQuery we also want to exploit the implicit iteration as much as possible. It seems to me the nicest model would be something like: <div class="link-with-tip"> <a href="foo">bar</a> <div class="tip">Arbitrary HTML to display on hover</div> </div> This model avoids text munging to match IDs with each other, which harms readability of the code to some extent. Now we can do $(document).ready(function() { $('div.link-with-tip a').hover(function() { $(this).parent().find('div.tip').show(); },function() { $(this).parent().find('div.tip').hide(); }); }); And done. To my eyes this is nicer than anything involving a substr() call. [1] http://css-discuss.incutio.com/?page=ScreenreaderVisibility -- Jonathan Chaffer Algorithm Alchemist, Structure Interactive (616) 364-7423 http://www.structureinteractive.com/