Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 1

Posted by sura1 - 24. Juli 2008

Bookmark and Share

CSS – T o o l t i p :

Ein Tooltip (auch »Quickinfo«, »Kurzinfo«; sinngemäß übersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster in einer grafischen Benutzeroberfläche, das dem Benutzer weitere Informationen zu einem Objekt anzeigt.

Es wird zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder Bildchen in Computerprogrammen, verwendet und erscheint, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Tooltips sind somit nichts anderes als kleine Informationsboxen über HTML-Elementen. Sie stellen aber auch ein Steuerelement dar, das ein Popupfenster erstellt, in dem Informationen für ein Element in der Oberfläche angezeigt werden.

Ich habe mich im Web nach Tooltips umgesehen, die nur mit Hilfe von HTML und CSS errichtet werden können.

Download Beispieldateien: hier (!)

Es gibt eine unübersichtliche Fülle, welche mit reinem CSS erstellt wurden – ich habe zur Einleitung 6 einfache Beispiele ausgewählt. Dazu muß gesagt werden, dass ich bei einigen Tooltips das Stylesheet unverändert gelassen habe; bei den anderen wurde z.B. die Hintergrundfarbe geändert, der margin (Außenabstand) bzw. der Innenabstand (padding) angepasst etc.


Beispiel 1:

Auf der Webseite von http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/ habe ich den ersten CSS-Tooltip gefunden. Das Script ist kleiner als 1KB und besteht aus 1 html-Zeile und 3 Zeilen CSS. Deshalb wird es von Herrn Jürgen Koller  „easy-css-tooltip“ genannt – was auch tatsächlich zutrifft.

Klicken Sie auf den Screenshot oder sehen Sie hier: Easy CSS Tooltip – by Kollermedia.at

Beispiel 2:

Basierend auf dem ersten Beispiel habe ich den HTML-Quelltext ein wenig verändert; der Tooltip befindet sich hier mitten im Blindtext, welchen ich in einen Link über meine Blogseite eingebaut habe.

Klicken Sie auf den Screenshot oder sehen sie hier: Variante zu Kollermedia.at

Beispiel 3:

Wenn Sie mit der Maus über den gelben Textbereich fahren, erscheint ein CSS-Infofenster und die Hintergrundfarbe im Text ändert seine Farbe.

Bitte auf die Grafik klicken oder das Beispiel hier(!) ansehen

Teil 2 der Tooltips finden Sie hier (bitte Link anklicken!):

CSS-Tooltips erstellen: Beispiele 4 – 6

3 Antworten to “CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 1”

  1. Hi,
    wirklich ein Spitzenseite zu dem Thema, dass ich explizit gesucht habe.
    Dafür ein dickes Danke.

    LG, Webwurst

  2. Androxybol said

    Hi! This is kind of off topic but I need some help from an established blog. Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to begin. Do you have any tips or suggestions? With thanks

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: