Schlagwörterarchiv: Tooltipps

Wie Sie 4 einfache Tooltipps nur mit CSS erstellen

Anleitung zur Erstellung von Pure CSS Tooltipps

Screen

Heute möchte ich Ihnen aus der riesigen Auswahl von coolen CSS-Experimenten eine Anleitung zur Erstellung eines CSS-Tooltips vorstellen und im Anschluss an das Kurz-Tutorial zum Gratis-Download anbieten.

Was sind Tooltipps

Tooltipps sind sogenannte »Quickinfos« oder »Kurzinfos«, welche dem Benutzer mehr Infos geben sollen. Sie werden zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder z.B. Bildern in Computerprogrammen, verwendet und erscheinen, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Das Erstellen eines individuellen, gut aussehenden Tooltipps war oft mit großem Aufwand verbunden und setzte Javascript (meist in Form von jQuery) voraus. Mittlerweile geht dies viel einfacher und schneller nur über CSS. Und das auch noch mit vielen tollen Effekten/Animationen.

Weiterlesen

Wie Sie mit CSS3 animierte Tooltipps erstellen

Animierte Tooltipps mit CSS3-Übergängen und Pseudoklassen erstellen

Demo1

Im heutigen Artikel zeige ich Ihnen, wie Sie mit CSS3 einfache und animierte Tooltipps mit CSS-Übergängen und den Pseudo-Klassen :before und: after erstellen können.

Die Idee dahinter ist eine ungeordnete Liste mit Links (Social Icons als Grafik), welche beim Drüberfahren mit der Maus (CSS-Eigenschaft hover) eine kleine Infobox erscheinen lässt.

Tooltipps sind überaus nützliche kleine Hilfestellungen in Form von kleinen Popup-Fenstern, die beim Hovern eines Elementes erscheinen. Sie enthalten meist Erklärungen zu dem Element (egal ob Text oder grafisch) und erhöhen somit die Benutzerfreundlichkeit.

Weiterlesen