CSS tooltip for simple text

Question

I would like to use tooltip in a web page with the following constraints:

• Tooltip should work with simple texts, not only with anchors.
• I do not want to use javascript, only css.
• I would like to make it work at least in Firefox and Internet Explorer.

A promising candidate is Eric Meyer's solution, but it uses anchors. Loadaveragezero's solution uses span for simple text, but it does not work in Internet Explorer.

I am looking for a working code sample or a link to a solution with the above parameters.

Answer 1

A solution that meets all your requirements is not possible. IE's respect for :hover is limited - Eric Meyer's solution works in IE because it uses anchors. If you want it to work on any element AND work in IE, you have to use JS.

Answer 2

It can't work within your constraints, I'm afraid. Internet Explorer 6 and previous only detects hover over an anchor, so you need to drop a requirement for it to work, either:

• Only has to work in IE7 and newer (in which case Loadaveragezero's solution will work)
• Can use anchors (in which case Eric's solution will work)
• Can use Javascript (in which case there are many ways to get hovering pre-IE7)

Answer 3

As others have said, your requirements are unrealistic. In environments where Javascript may be disabled, I typically will use the title attribute to get simple browser tooltips as a fallback, and then enable better looking tooltips via Javascript reading the title attributes (using a framework such as jQuery, or for my personal preference Mootools).

Code sample might be something like (using Mootools and the Tips addon):

<script type="text/javascript">
window.addEvent('domready', function() {
    // Enable the most basic default tooltips
    var tooltips = new Tips('.tips');
}
</script>

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p>