16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

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!

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

Kommentare:

  1. jo, den finde ich echt gut. Danke 484_Chiller

    AntwortenLöschen
  2. Ein nachteil bei solchen tooltips ist das man nur reinen text wiedergeben kann. Links oder Bilder im tooltip funktionieren nicht.

    AntwortenLöschen
  3. Na klar geht das, man muß dann eben nur die Codes ein wenig ändern.

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>