CODEWITHSUNDEEP
htmlcssinternet-explorertooltipdoctype
James Andrew
James Andrew

Reputation: 7243

IE problems: HTML tooltips on hover, requires a doctype

I have some simple CSS/HTML for a very basic tooltip:

    <style type="text/css">
    .tooltip {
        text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .tooltip:hover span {
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
    }
    .custom { padding: 0.4em 0.4em 0.4em 0.8em; }
    .info { background: #D5F1FF; border: 3px solid #2BB0D7; }
    </style>

<span class="tooltip">Thing which can be hovered on</a>
<span class="custom info">
Text in tooltip goes here...
</span></span>

Which works all fine for Firefox and Chrome, obviously, but when I try it with Internet Explorer, the tooltip just doesn't load/work...

HOWEVER, when I put a doctype at the top e.g:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

It works fine in Internet Explorer, but all my other layout's seem to break, i've never used a doctype, for the reasons of never needing one. Layouts been fine in all three browsers until this.

Is there something in the CSS which can be changed so the tooltip will work in Internet Explorer (without a doctype) or a similar tooltip CSS method? -Pref not javascript.

Hope i've explained my problem sufficiently, thanks.

Upvotes: 1

Views: 6319

Answers (1)

BoltClock
BoltClock

Reputation: 723688

Well, you're going to need to use a doctype in your new layouts moving forward. It's nearing the end of 2012; having a doctype is pretty much required these days. For one, it ensures consistency between browsers: as you may have seen, the quirks modes of other browsers is similar to their standards modes... and vastly different from IE's own quirks mode.

That said, you can use an <a href> in place of a <span> if you must adhere to quirks mode for whatever reason, and :hover will work in IE just fine:

<a href="#" class="tooltip">Thing which can be hovered on</a>

Upvotes: 5

Related Questions