CSS-Tooltip: Schritt-für-Schritt-Anweisungen und Möglichkeiten zum Entfernen

Zusätzliche Informationen auf Websites häufigin Form von Hover-Tooltips platziert, um beispielsweise komplexe Abkürzungen zu entschlüsseln oder Benutzeraktionen zu klären. Diese Schnittstellenlösung wird als Tooltip bezeichnet. Es spart Platz auf der Seite, indem nur Basisdaten angezeigt werden, der Leser jedoch die Möglichkeit hat, Ergänzungen nach Bedarf zu überprüfen. Neben der rein informativen Funktion können Tooltips wichtige Gestaltungselemente sein, die den Gesamtstil der Website betonen und Aufmerksamkeit erregen.

Tooltip-Blockverhalten

Das Element, mit dem das Tooltip angezeigt wird, wird als Ziel bezeichnet.

Popup-Blöcke enthalten normalerweise wichtige,aber keine grundlegenden Informationen. Es wird davon ausgegangen, dass der Benutzer es nur lesen sollte, wenn er möchte. Um den Hauptinhalt nicht zu stören, zu stören oder abzulenken, muss ein Hinweis eine Reihe von Anforderungen erfüllen:

• Glattes Aussehen. Ein versehentliches Bewegen des Mauszeigers über das Zielelement sollte nicht dazu führen, dass der Tooltip abrupt herausspringt. Dies mag für kleine Textfelder noch akzeptabel sein, ist jedoch kategorisch ungeeignet, wenn der Tooltip groß ist oder Bilder enthält.
• Angemessene Unterkunft. Das Eingabeaufforderungsfenster sollte nicht den Inhalt abdecken, den es erklärt, damit der Benutzer mit den Daten übereinstimmen kann. In Fällen, in denen der Tooltip hauptsächlich dekorativ ist, ist dies akzeptabel.
• Kein Einfluss auf andere Inhalte. Tooltips sollen kleine, kaum sichtbare Helfer für den Benutzer sein, daher sollten sie nicht unpraktisch sein. Mit dem richtigen Tooltip werden benachbarte Blöcke nicht verschoben oder von der Seite verschoben, wodurch Bildlaufleisten erstellt werden.
• Sichtweite. Der Tooltip muss vollständig sichtbar sein, darf sich nicht mit anderen Elementen überschneiden oder sich hinter dem Rand des Browserfensters verstecken.
• Einfache Verwaltung. Es ist wichtig, dass der Benutzer intuitiv versteht, wie QuickInfos aufgerufen und entfernt werden, und keine Schwierigkeiten mit diesen Aktionen hat.

Tooltip in reinem HTML

Die Fähigkeit, Hinweise zu erstellen, liegt in der Sprache des Hypertext-Markups von Webseiten. Ursprünglich sollten Abkürzungen und komplexe wissenschaftliche Begriffe entschlüsselt werden.

Um einen solchen Popup-Block zu erstellen, benötigen Sie ein title-Attribut, das für jedes HTML-Tag verfügbar ist.

<p> Proxima Centauri befindet sich etwa4.22 <i title = "9 460 730 472 580 800 Meter"> Lichtjahr </ i> von der Erde, die 270 Tausendmal so groß ist wie die Entfernung von der Erde zur Sonne. </ p>  <img title = "Schloss Neuschwanstein" src = "/ images / disney.jpg">

Die Hauptvorteile des HTML-Tooltips sind: Benutzerfreundlichkeit und die Verwendung mit beliebigen Layoutelementen - von Text bis zu Bildern. Sie hat aber auch große Nachteile:

• Sie können den Text nicht formatieren.
• zu einfaches Aussehen, das nicht geändert werden kann;
• Unfähigkeit, Bilder einzufügen.

Das HTML-Titelattribut eignet sich nur für kleine Tipps, für die kein spezielles Styling erforderlich ist. Ansonsten ist es hilfreich zu wissen, wie man QuickInfos mit CSS erstellt.

CSS-Tooltip

Sie können einen schönen benutzerdefinierten Hinweisblock mithilfe von kaskadierenden Stylesheets erstellen. Es verwendet grundlegende CSS-Konzepte:

• absolute Positionierung - zum Herausziehen von Hinweisen aus dem allgemeinen Fluss des Dokuments;
• Verstecken eines Blocks in einem inaktiven Zustand mithilfe einer Eigenschaft vollständig Anzeige;
• Pseudoklasse : schweben, die einem beliebigen Element unter dem Mauszeiger zugewiesen ist;
• Pseudoelemente : Vor und : nach demDies kann für einfache Eingabeaufforderungen verwendet werden, um kein separates HTML-Element zu erstellen.
• Animation und Ausblenden für schöne Ein- und Ausblendeffekte.

Alle diese Eigenschaften werden von modernen Browsern gut unterstützt, wodurch der Tooltip-Mechanismus zuverlässig funktioniert.

Pseudoklasse : schwebenreagiert nicht nur auf den Cursor, sondern reagiert auch auf die Berührung eines Fingers auf dem Touchscreen, wodurch mobile Geräte unterstützt werden können.

Block oder Pseudoelement

Ein CSS-Tooltip kann entweder ein separater HTML-Block mit eigener Struktur oder ein Pseudoelement eines anderen Blocks sein. Jede dieser Optionen hat Vor- und Nachteile.

Es ist viel einfacher, Inhalte in einem separaten Container zu bearbeiten. Sie können Bilder, Überschriften und andere Elemente darin platzieren.

Das Pseudo-Element ermöglicht es Ihnen, unnötiges loszuwerdenblockiert und macht das Layout ein wenig einfacher. Textinhalte können in das Attribut des Zielelements eingefügt werden, ohne dass der Tooltip selbst erstellt werden muss. Alles wird von CSS erledigt. Ein Pseudoelement ist jedoch für einen Block mit einer komplexen Struktur schlecht geeignet. Es kann auch nur zum Schließen von Tags erstellt werden. Sie können einen solchen Hinweis nicht direkt an das Bild anhängen.

Erstellen eines CSS-Popupblocks

Lassen Sie uns einen schön gestalteten Tooltip mit einer komplexen Struktur für den nächsten Stern aus dem Sternbild Centaurus erstellen.

Definieren wir zunächst das HTML-Markup:

<h2> Sterne des Sternbildes Centaurus </ h2> <ulclass = "Sterne"> <li class = "star"> Alpha Centauri </ li> <li class = "star"> Beta Centauri </ li> <li class = "star"> Theta Centauri </ li> <li class = "star"> Gamma Centauri </ li> <li class = "star"> Epsilon Centauri </ li> <li class = "star"> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (vom lateinischen proxima - am nächsten) ist ein roter Zwerg, der zum Sternensystem Alpha Centauri gehört, dem der Erde nach der Sonne am nächsten gelegenen Stern. </ div> </ li> </ ul> </ ul>

Lassen Sie uns den Hinweisblock mit CSS formatieren und ausblenden:

.star { Position:relativ; }}  / * Stile für Tooltip * / .star .tooltip { Anzeige: keine; Position: absolut; oben: 50%; transformieren: translateY (-50%); links: 100%; }}  / * Stile für dekoratives Dreieck * / .star .tooltip: vor {...}  / * Popup-Tooltip beim Hover * / .star: hover .tooltip {display: block; }}

Die Stile der Liste und der Tooltip selbst können beliebig sein, sie werden der Kürze halber weggelassen.

Wenn Sie den Tooltip in einem separaten Block platzieren, können Sie Bilder darin verwenden, Text formatieren und sogar Pseudoelemente für ein schönes Design erstellen.

Tooltip im Pseudoelement

Demonstrieren Sie die Erstellung von QuickInfosIm Pseudoelement hilft das grafische Editorfeld. Jedes Werkzeug wird in Form eines Symbols dargestellt, dessen Zweck für einen unerfahrenen Benutzer möglicherweise unverständlich ist. Damit niemand unglücklich bleibt, sollten den Symbolen Hinweise mit Namen hinzugefügt werden.

Der HTML-Code des Panels sieht folgendermaßen aus:

<div class = "Instrumente"> <div class = "Instrument"data-tooltip = "Pinsel"> <img src = "/ images / pinsel-icon.svg"> </ div> <div class = "instrument" data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </ div> <div class = "instrument" data-tooltip = "Vergrößern"> <img src = "/ images / zoom-in-icon.svg"> </ div> <div class = "instrument" data-tooltip = "Verkleinern"> <img src = "/ images / zoom-out-icon.svg"> </ div> </ div>

Der eindeutige Name des Instruments wird in das Attribut eingefügt Daten-Tooltip... Es gibt ein Symbol im Block, aber der Tooltip selbst fehlt im HTML-Code.

Da der Tooltip nur einen kurzen erläuternden Text enthält, können Sie Pseudoelemente verwenden, um ein Durcheinander des Lichtpaneels zu vermeiden.

/ * allgemeine Stile für das Symbol * / ...Instrument { Position: relativ;  Farbe: # 666; Hintergrund: weiß;  Cursor: Zeiger; }}  / * Stile für Symbol beim Schweben * / .instrument: hover { Hintergrund: # 666; Farbe weiß; }}  / * Stile für den Tooltip * / .instrument: hover: after { Inhalt: attr (Daten-Tooltip); Position: absolut; links: 100%;  Farbe: # 666; }}

Das Pseudoelement wird nur beim Hover angezeigt, sodass es nicht mit display: block ausgeblendet werden muss. Sein Standort wird von Eigenschaften bestimmt Position und links / rechts / oben / unten... Um von einem Attribut zu erhalten Daten-Tooltip Das Ziel-CSS-Tooltip-Inhaltselement bietet die Funktion attr ()... Dekorative Stile wurden der Kürze halber weggelassen.

Hinweis beim Klicken ohne Skripte

Die zuvor diskutierten Tooltip-Mechanismen reagierten darauf, dass die Maus über dem Zielelement schwebte, und basierten auf einer CSS-Pseudoklasse : schweben... In einigen Situationen ist es vorzuziehen, den Tooltip beim Klicken zu öffnen. Dieser Effekt ist einfach in JavaScript zu implementieren, aber CSS kann die Aufgabe übernehmen.

Unter der Liste der CSS-Pseudoklassen gibt es eine wunderbare Klasse : Fokusverfügbar für Links und Eingabeelemente. Im Gegensatz zu : schwebendie verschwindet, sobald der Cursor verlässtMaus, mit dieser Pseudoklasse können Sie den aktiven Status des Zielelements beibehalten Und wenn Eingabefelder semantisch nicht sehr gut zum Erstellen von QuickInfos geeignet sind, sind Links in Ordnung.

Ersetzen wir das Listenelement aus dem ersten Beispiel durch einen Link:

<a class = "star" href = "Javascript:void (0) "> Proxima Centauri <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (vom lateinischen proxima - am nächsten) ist ein roter Zwerg, der zum Sternensystem Alpha Centauri gehört, dem der Erde nach der Sonne am nächsten gelegenen Stern. </ div> </a>

Attribut href mit der Bedeutung Javascript: nichtig (0) ist erforderlich, um eine Reaktion des Browsers auf das Klicken auf den Link zu verhindern.

Mit den folgenden Stilen können Sie beim Klicken einen Tooltip mit einer Beschreibung des Sterns aufrufen:

.star .tooltip { Anzeige: keine; }}  .star: focus .tooltip { Bildschirmsperre; }}

Der Link bleibt so lange fokussiert, bis der Benutzer auf eine beliebige Stelle auf der Seite klickt.

So kann ein Tooltip auf einer Website auf viele verschiedene Arten erstellt werden, auch ohne JavaScript. Jeder von ihnen ist gut, Sie müssen nur die für eine bestimmte Situation am besten geeignete auswählen.