Wie Sie nur mit CSS Tooltips erstellen können

Pure CSS Tooltips von CSSplay

Pure CSS Tooltip

Auf der Webseite von CSSplay zeigt der „CSS-Papst“ Stu Nicholls eine große Anzahl von Experimenten mit CSS. Der CSS-Profi demonstriert dabei nicht nur sein großes Können, sondern zeigt mit seinen tollen Anleitungen, dass es einfach Spaß macht, mit CSS zu arbeiten.

Ich möchte Ihnen heute auf dem riesigen Fundus an CSS-Experimenten die Erstellung eines CSS-Tooltips nur mit CSS und HTML vorstellen und die entsprechenden Dateien zum kostenlosen Download anbieten.

Original ansehen:
Tooltip von CSSplay

Was ist ein Tooltip?
Ein Tooltip (auch »Quickinfo«, »Kurzinfo«; sinngemäß übersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster 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.

CSSplay Tooltip von Stu Nicholls

[Meine Demo ansehen: Grafik oder untenstehenden Link anklicken!]

Tooltip-Demo

Der Tooltip funktioniert an jedem PC and Mac und wurde für IE9+, Firefox, Chrome, Safari, Opera, iPad, iPhone und iPod Touch optimiert.

Musterdateien herunterladen, CSS und HTML ansehen:

Download Musterdateien (Zip-Datei: 36 KB):
Tooltip: CSS-Formatierung
CSS-Datei im PDF-Format ansehen:
Tooltip: CSS-Formatierung
HTML-Datei im PDF-Format ansehen:
Tooltip: HTML-Formatierung

Copyright – Lizenzbedingungen:

You may use this method on your personal ’non-profit‘ web site without seeking my permission. A link back to CSSplay is always appreciated. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
Keine Beschränkungen bei der Verwendung auf persönlichen und geschäftlichen Webseiten, jedoch sind ein Backlink bzw. eine Spende jederzeit willkommen.

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

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