css-trick Infofenster beim Drüberfahren

Unter einem „Tooltip“ versteht man einen css-trick in Form eines kleinen Info-Fensters, das sich beim Hovern öffnet und weitergehende Zusatzinformationen enthält. Wenn auch nachfolgend der Begriff „Info-Fenster“ verwendet wird, so sei darauf hingewiesen, dass es sich dabei nicht um ein eigenes Browserfenster, sondern vielmehr um eine „Box“ handelt, die beim Hovern erscheint.
Hier das Beispiel: Beim Drüberfahren soll text erscheinen HalloIch bin ein Tipfenster, wer über mich fährt erhält Informationen.

 

Folgendes wurde in die Style.css eingefügt:

a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:#2D006B;
text-decoration:none;
}

a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}

und hier der html-Text:

Bei der Klasse a.info werden die Text- und Hintergrundformatierungen für den „normalen“, per Infofenster dann zu erläuternden Text hinterlegt. position:relative; z-index:1; dienen dazu, das spätere Infofenster in Bezug zum Text zu positionieren.
a.info:hover definiert in diesem Fall die Hintergrundfarbe des normalen Textes beim Hovern. Die „z-index-Angabe“ bewirkt, dass sich das spätere Infofenster eine Ebene über dem Ursprungstext einblendet.
„display: none;“ bei a.info span verhindert, dass der hinterlegte Infotext außerhalb des Hover-Zustandes ersichtlich ist.

In a.info:hover span sind schließlich die Angaben für den Tooltip hinterlegt. Man kann ihn absolut zum Text positionieren, indem top- und left- Werte definiert werden. Ferner können hier die üblichen Formatierungsangaben für Breite, Farben, Schrift, Hintergrund und Rahmen eingetragen werden.

Weitere Infos. Man kann natürlich auch Bilder einfügen

Tooltipp mit eingeblendeter Grafik

Anstelle eines erscheinenden Textes kann mann natürlich auch eine Grafik einblenden. Zu diesem Zweck muss man a.info:hover span eine Hintergrundgrafik sowie einen Breiten- und Höhenwert entsprechend dieser Grafik zuweisen.
Als Beispiel hier die modifizierten Angaben, wie in der dritten Demo zu sehen.

a.info:hover span
{
display:block;
position:absolute;
top:-60px;
left:300px;
width:234px;
height: 60px;
background: url(grafik.jpg);
}

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.