CSS Tooltips - NO JavaScript

Toolitps ganz ohne JavaScript, eine feine Sache! Ich werde euch zeigen wie das funktioniert.

Der CSS Code (kommt zwischen <style type="text/css"> und </style>). Oder ihr gebt den in eine externe CSS Datei.

a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.bt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.bt:hover{ z-index:25; color: #f72a09; background:;}
a.bt:hover span.thebubble{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000000;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.bt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.bt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.bt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #000000;
background: url(bubble.gif) no-repeat bottom;
}

Ein Link mit so einem Tooltip sieht dann so aus:

<a href="#" class="bt">LINK TITEL<span class="thebubble"><span class="top"></span><span class="middle">TOOLTIP TEXT</span><span class="bottom"></span></span></a>

Dazu kommen noch 2 Bilder, die in dasselbe Verzeichnis geladen werden müssen, wo sich auch die styles.css, bzw. die HTML/PHP Datei befindet.

Bild Nr.1 (Rechte Maustaste, Grafik speichern unter)


Bild Nr.2 (Rechte Maustaste, Grafik speichern unter)

Das wäre dann alles! Die Vorteile liegen ganz klar auf der Hand! Diese Tooltips werden auch bei nicht aktiviertem JavaScript eingeblendet! Erfolgreich getestet habe ich das ganze unter Firefox 3x, Internet Explorer 7,8 und Opera 9x!

Update 14.12.2009: Alternative Version mit einem simplen Code und ohne Bilder!

a.tooltip span{
display:none;
padding:5px;
margin-left:8px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
-moz-border-radius:5px;
border:1px solid #cccccc;
color:#6c6c6c;
}

<a href="#" class="tooltip">LINK TITEL<span>HIER DER TOOLTIP TEXT</span></a>

Tags: css tooltips, tooltips ohne javascript, tooltips css javascript, no javascript tooltips only css