In diesem Guide möchte ich euch zeigen, wie ihr Tooltips mit Schatten erstellen könnt, die auch am Zeiger einen korrekten Schatten haben. Bei Tooltips werden die Zeiger gerne über den Border-Trick generiert. Bei diesem Trick sieht das Element zwar dreieckig aus, ist aber tatsächlich weiterhin ein Rechteck, wodurch bei dieser Lösung der Einsatz von box-shadow nicht funktioniert. Weitere Hilfe nötig? Anfragen!
Anforderungen an die Tooltips
- Möglichst wenig HTML-Mark-up
- Anzeige eines Zeigers mit korrektem Schatten
- Beliebiger Inhalt möglich (auch Bilder, etc.)
- Optional soll ein Rahmen möglich sein
Schritt 1: Tooltips ohne Rahmen
Dann mal frisch ans Werk! Zunächst einmal liegt es nahe ein Container-Element zu definieren, welches die Klasse tooltip erhält. Dieses Element enthält zunächst den (beliebigen) Content des Tooltips.
See the Pen
Tooltip mit Schatten – Schritt 1 by Markus Winkelmann (@designerzone)
on CodePen.
Wie schon erwähnt können wir den Border-Trick nicht anwenden, wenn das Tooltip in seiner Gesamtheit einen Schatten bzw. Glühen erhalten soll.
Die Alternative ist ein um 45° gedrehtes Quadrat. Ein Quadrat können wir sehr gut über ein Pseudo-Element erstellen und dessen absolute Mitte am unteren Rand des Tooltips horizontal zentriert ausrichten. Dreht man das Quadrat dann per transform: rotate(45deg); liegen zwei Eckpunkte genau auf der Kante des Tooltip-Containers.
Einschränkung 1: Die hier vorgestellte Technik funktioniert nur für rechtwinklige Zeiger.
Es ergeben sich nun zwei Probleme.
Problem 1: Überlagerung des Zeigers
Ganz offensichtlich ist, dass der Inhalt vom Zeiger-Objekt überlagert wird. Dies ist relativ einfach gelöst, indem wir dem Tooltip einen inneren Container verpassen.
See the Pen
Tooltip mit Schatten – Schritt 2 by Markus Winkelmann (@designerzone)
on CodePen.
Der Trick ist nun, dass der Inhaltscontainer die Hintergrundfarbe des Tooltips sowie den Innenabstand (padding) erhält. Der tooltip-content wird relativ positioniert, damit die natürliche Stapelreihenfolge für die Überlagerung des Zeigers sorgt.
Problem 2: Die »echte« Breite des Zeigers
Im CSS wurde die Breite des Quadrats mit 50 Pixeln angegeben. Tatsächlich ist der Pfeil aber nun ca. 71 Pixel breit. Das kommt durch die Rotation des Quadrats, denn die optische Breite des Zeigers entspricht der Diagonalen des Quadrats. Die Länge lässt sich mit dem Satz des Pythagoras berechnen. √(50px² + 50px²) = Breite der Diagonale lässt sich zu √(2 × 50px²) und weiter zu √(2) × 50px = 70.71067812…px umformen.
Der krumme Wert ist an dieser Stelle gar nicht mal so das Problem, sondern eher die Tatsache, dass der Entwickler im CSS einen Wert definiert, der ein anderes Ergebnis produziert. Formal ist das Ergebnis korrekt, nur intuitiv ist es nicht. Das wird vor allem dann problematisch, wenn so ein Code nach Monaten oder Jahren mal wieder angefasst wird.
Das gewünschte Verhalten wäre also eigentlich, dass der Zeiger bei der Ausgabe auch die Breite erhält, wie sie angegeben wird.
See the Pen
Tooltip mit Schatten – Schritt 3 by Markus Winkelmann (@designerzone)
on CodePen.
Die Realisierung sieht man nun am Einsatz der SASS-Variablen. Die Wurzel aus 2 habe ich als festen Wert mit genügend Nachkommastellen gespeichert. Wer Compass nutzt, hat auch die sqrt-Funktion zur Verfügung, um eine noch genauere Berechnung durchzuführen. Die Größe wird also nun als krummer Wert vergeben, damit die Diagonale die Ziel-Breite ($target-size) erhält.
Desweiteren habe ich einige Konfigurationsvariablen erstellt, um das SCSS nach dem DRY-Prinzip aufzubauen. Die Tooltips ohne Rahmen wären damit fertig.
Schritt 2: Tooltip um Rahmen erweitern
Einschränkung 2: Die Rahmen funktionieren nur mit undurchsichtigen Farben.
Schnelle Lösung
Zum Glück lassen sich bei der box-shadow-Eigenschaft mehrere Schatten angeben. Dies kann man nutzen und einen weiteren Schatten angeben, der nicht weichgezeichnet wird und somit eine harte Linie um das Tooltip zeichnet.
Hier gilt es zu berücksichtigen, dass das Tooltip durch den Schatten nicht größer wird und beim Einsatz der Technik ggf. auf zusätzlich notwendigen Abstand geachtet werden muss. Außerdem muss der zweite Schatten bei Bedarf angepasst werden, da er vom ersten harten Schatten überlagert wird.
See the Pen
Tooltip mit Schatten – Schritt 4 by Markus Winkelmann (@designerzone)
on CodePen.
Hat der Rahmen eine helle Farbe wie im Beispiel, sieht man eine weitere Schwäche der schnellen Lösung. Man muss genau hinsehen, aber der Rahmen des Tooltips wird am Zeiger mit dem Schatten des Zeiger-Quadrats überlagert – unschön!
Komplizierte Lösung
Aufgrund der Schwächen der schnellen Lösung, erkläre ich nun noch eine andere Lösung. Hierbei erhält der innere Container und der Zeiger den Rahmen als echten border – das Größenproblem wäre damit gelöst. Dies führt das nächste Problem ein, da nun der Rahmen über dem Zeiger liegt.
See the Pen
Tooltip mit Schatten – Schritt 5 by Markus Winkelmann (@designerzone)
on CodePen.
Um dieses Problem zu beheben, ist es notwendig, dass die Inhalte im tooltip-content mit HTML-Elementen ausgezeichnet sind. Denn man erzeugt an diesem Element ebenfalls einen Zeiger (ohne Rahmen) und positioniert ihn über den Rahmen.
Damit die Abschlüsse sauber sind, muss dieser genau über dem weißen Anteil des Zeigers mit Rahmen liegen. Die dafür benötigte bottom-Eigenschaft werden wir exakt berechnen. Zunächst überlagern wir den Zeiger komplett (inkl. Rahmen) – mit folgender Eigenschaft: bottom: -($size / 2) – $tooltip-border-width;
Dann benötigen wir nur noch die Breite des gedrehten Rahmens, um die wir die Überlagerungsfläche wieder nach oben verschieben. Dies können wir wieder mit dem Pythagoras ausrechnen, da wir die Dicke des Rahmens kennen: $tooltip-border-width * $squareroot-of-two.
Der hintere Teil unserer bottom-Eigenschaft sieht nun wie folgt aus: – $tooltip-border-width + ($tooltip-border-width * $squareroot-of-two), was wir leicht zu + $tooltip-border-width * ($squareroot-of-two – 1) umwandeln können.
See the Pen
Tooltip mit Schatten – Schritt 6 by Markus Winkelmann (@designerzone)
on CodePen.
Browser-Kompatibilität und Vorteile
Wir bedienen uns hier lediglich zweier CSS3-Eigenschaften, box-shadow und transform (Produktiv unbedingt mit Prefix), die von allen heutzutage relevanten Browsern unterstützt werden. Diese Technik kann also ohne Einschränkungen genutzt werden. Außer du musst Opera Mini unterstützen, dann tust du mir leid.
Zum Abschluss noch ein modifiziertes Beispiel mit etwas mehr Inhalt, um auch diese angestrebte Möglichkeit zu zeigen. Hier kann man sich nun auch vorstellen, dass dort Bilder oder andere interaktive Elemente enthalten sind. Wir können ansonsten gerne helfen!
See the Pen
Tooltip mit Schatten – Schritt 7 by Markus Winkelmann (@designerzone)
on CodePen.
Kommentare