Es gibt viele Online-Tutorials, die die Idee CSS-basierter Tooltips diskutieren. Viele Beispiele erfordern jedoch HTML-Elemente zusammen mit dem Anker-Link. Besucher können eine grundlegende QuickInfo-Nachricht mit dem Standardtitelattribut erhalten. Ich möchte dieser Methode folgen und den Prozess ein wenig aktualisieren.
In diesem Tutorial möchte ich zeigen, wie man CSS3-Tooltips erstellt, die kontextuell auf einem HTML5-Attribut basieren. Mit verschiedenen Klassen können wir einzigartige Farbschemata zusammen mit CSS3-Übergangseffekten integrieren. Für diese Technik ist kein zusätzlicher HTML-Code erforderlich, es sei denn, Sie hängen die Tooltips an ein anderes Element (z. B. ein Textfeld). Lass uns anfangen!
Live Demo - Quellcode herunterladen
Fertig machen
Die Seite selbst ist ziemlich langweilig, deshalb möchte ich mich hauptsächlich auf den CSS-Code konzentrieren. Jeder Anker-Link erhält einen Tooltip, der auf der Klasse basiert .tooltip. Mit der HTML5-Datensyntax ziehe ich den Text aus einem Attribut namens Daten-Tool.
Am besten vermeiden Sie das Titel Attribut, da dies eine weitere browserbasierte QuickInfo über dem CSS anzeigt. Wir können die Richtung jedes Tooltips mit zusätzlichen Klassen im Anker-Link ändern. Noch eine Klasse .animieren wird auch Übergänge auf den Effekt anwenden.
Meine ursprüngliche Idee begann mit diesem Tutorial, das einen größeren gruppierten Codeblock verwendet. Leider schlägt der Autor vor, für den Tooltip-Titel alt-Text zu verwenden, aber alt darf nicht auf Ankerverknüpfungen gesetzt werden. Daher habe ich die Tipps umgerüstet und auf saubereren HTML5 / CSS3-Code aktualisiert.
Tooltip erstellen
Der beste Ort, um zu beginnen, ist der generische Code, bevor etwas auf der Seite angezeigt wird. Ankerverbindungen können verwenden :nach dem und :Vor Pseudo-Elemente, die mit CSS angewendet werden sollen. Auf diese Weise können Entwickler ein paar Inhalte vor und nach jedem anwendbaren Element anpassen. In diesem Fall erstelle ich ein Dreieck-Tooltip mit einer separaten Sprechblase.
Die Ankerverbindung selbst ist relativ positioniert, sodass die Pseudoelemente unter Verwendung der absoluten Positionierung angewendet werden können. Dies erleichtert das Zusammenfügen der Blase und des Dreiecks in eine QuickInfo. Sichtbarkeit: versteckt hält das Trinkgeld aus dem Blickfeld des Benutzers, bis ein Link angezeigt wird. Andernfalls ist der Tooltip schwebbar, aber bei einer Deckkraft von 0%.
Sie werden feststellen, dass der Standardhintergrund durchscheinend ist rgba () Rahmen. : before enthält den Dreieckscode, während: after die QuickInfo-Blase und den Text mit der Eigenschaft enthält Inhalt: attr (Datentool).
Sie werden am Ende meines Codebeispiels feststellen, dass wir die Position aktualisieren, wenn ein Benutzer auf den Anker-Link fährt. Diese Position ändert sich für jede separate QuickInfo-Position zusammen mit den Randstilen für den Pfeil.
Positionsklassen
Sie können eine zusätzliche Klasse auf den Ankerlink anwenden, um eine bestimmte QuickInfo-Position zu erzwingen. Standard wird über dem Text angezeigt und die anderen Klassen werden angezeigt .Recht, .links, und .Unterseite.
Die untere Position verwendet Pixel zusammen mit der voreingestellten oberen Position. Ich wollte aber auch demonstrieren, wie Stile mit Prozentwerten in den linken / rechten Tooltips angewendet werden.Am besten bleiben Sie bei einer Einheit, die Ihrem Absatztext ähnlich ist, damit alles im gleichen Verhältnis bleibt.
Prozentsätze werden häufig für die horizontale Positionierung benötigt, da die Pixelbreite einer Verknüpfung nicht immer bekannt ist. Skalierbare Ems sind eine andere Wahl, wenn es um Schriftarten geht, aber die Positionierung kann schwierig werden.
Die einzigen anderen Änderungen neben der Position sind Rahmenbreiten und -farben. Dies wird auf die angewendet :Vor Element, weil es auf jedes Dreieck abzielt. Die Position bestimmt, wie das Dreieck aussieht und auf welcher Seite der Blase es erscheinen muss.
Zusätzliche CSS-Styles
Die zwei Extra-Klassen-Snippets dienen dazu, QuickInfos neu zu färben und animierte Effekte auf dem Display zu verwenden.
Farbklassencodes sind sehr einfach, aber auch dicht und wiederholend. Dieser Codeblock ist für eine einzige Farbpalette von Blau. Der Tooltip :nach dem Selektor wird nur einmal benötigt, um den Hintergrund der Blase zu aktualisieren. Wir benötigen 4 Selektoren, die jeden Pfeil in Bezug auf die 4 Positionen des Tooltips ausrichten.
Für verschiedene Dreieckspositionen müssen Farben auf verschiedene Ränder angewendet werden. Glücklicherweise ist das Kopieren / Einfügen und Aktualisieren mit Ihrem eigenen Farbschema sehr einfach.
Da die Tooltip-Blase und das Dreieck gemeinsam animiert werden können, habe ich für beide einen Selektor geschrieben. Sie verwenden den gleichen Animationsstil, um alles flüssig zu halten. Alles was Sie tun müssen, ist das .animieren auf einen beliebigen Tooltip-Ankerlink.
An andere Elemente anhängen
Im letzten Teil dieses Lernprogramms wird erläutert, wie diese Tooltips für Elemente verwendet werden, für die keine Pseudo-Unterstützung vorher / nachher vorhanden ist. Der benachbarte Gleichheits-Selektor ist in Bezug auf den Tooltip wichtig. Sie können diesen Code jederzeit ändern, wenn Sie spezifischere Elemente anvisieren möchten.
Sie werden feststellen, dass die meisten Eigenschaften sehr ähnlich aussehen. Wir holen immer noch Inhalte aus dem Datenwerkzeug und die Tipps werden nur angezeigt, wenn ein Benutzer sich auf ein Eingabefeld konzentriert. Das .fieldtip Klasse kann zu jedem Element hinzugefügt werden. Ich habe eine Spanne ausgewählt, wie Sie in meinem HTML-Code sehen werden:
Auch bei diesen externen Tooltipps habe ich die Animationseigenschaften beibehalten. Sie können versuchen, die Einstellungen mit einer anderen Farbe, Schriftgröße oder einer beliebigen Anzahl zusätzlicher CSS-Eigenschaften zu ändern.
Live Demo - Quellcode herunterladen
Schließen
Ich finde, diese Tooltips bieten eine hervorragende Startvorlage für die Anpassung. Sie können alle Eigenschaften entfernen oder ändern, um andere Hintergrundfarben, Animationsstile oder bildbasierte Dreiecke zu erhalten. Beachten Sie, dass die animierten Effekte zusammen mit den CSS-Dreiecken in älteren Browsern fehlerhaft wirken können. Laden Sie eine Kopie meines Codes herunter und sehen Sie, was Sie für Ihre eigenen Projekte erstellen können.