CSS Tooltip

Hier zeige ich euch wie ihr ganz einfach und schnell selbst ein kleines Tooltip basierend auf CSS erstellen könnt.

Zunächst zwei Beispiele, fahrt einfach mal mit der Maus über die Bilder.



Dies ist ein Tooltip mit Text.
Ist doch ganz nett oder?

Wie ihr seht, könnt ihr sowohl ein Tooltip mit Hintergrund, als auch eines mit zusätzlichem Text gestalten. Wichtig dabei ist es, das Bild als Link zu kennzeichnen und die Klasse anzugeben.

Hier seht ihr den Code für den css Teil.

Die Hintergrund-Farbe und die Schriftfarbe könnt ihr natürlich beliebig verändern! Auch die Deckkraft (opacity und filter) könnt ihr verändern. Was ihr aber auf jeden Fall anpassen müsst, ist die Höhe und Weite (ein kleiner Nachteil).

Und das müsst ihr bei euren Bildern angeben. Einmal mit, einmal ohne Text.

Natürlich müsst ihr eure eigene Bildurl angeben. Es ist auch möglich das Bild zu verlinken anstatt die Raute # als Platzhalter zu verwenden. Als Tooltip Text könnt ihr verwenden, was ihr wollt. Auch Zeilenumbrüche könnt ihr benutzen. Probiert einfach was aus!