CODEWITHSUNDEEP
htmlcsstooltip
rics
rics

Reputation: 5596

CSS tooltip for simple text

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

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.

Upvotes: 1

Views: 3227

Answers (3)

One Crayon
One Crayon

Reputation: 19229

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>

Upvotes: 4

Rob Grant
Rob Grant

Reputation: 7348

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)

Upvotes: 1

Rex M
Rex M

Reputation: 144122

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.

Upvotes: 5

Related Questions