Tooltips sind eine großartige Möglichkeit, Ihrem Benutzer mehr Informationen anzuzeigen, indem er einfach mit der Maus über ein Bild oder einen Text fährt. Sie können beispielsweise verwendet werden, um Bildunterschriften oder längere Beschreibungen für Links oder andere nützliche Informationen bereitzustellen, die das Benutzererlebnis Ihrer Website verbessern würden, ohne das Design zu beeinträchtigen.
Heute zeige ich Ihnen, wie Sie mithilfe von HTML und CSS einen einfachen Tooltip erstellen, um den Titel-Tag Ihrer Hyperlinks anzuzeigen.
Beginnen wir mit der Erstellung eines einfachen Markups für den Link. Wir müssen ihm einen Titel geben, der den Tooltip-Inhalt darstellt, und ihm eine Klasse zuweisen:
Der nächste Schritt besteht darin, einen rudimentären Stil für unsere Tooltip-Klasse zu erstellen:
.tooltip{
Anzeige: inline;
Position: relativ;
}
Wir zeigen unseren Tooltip jetzt inline mit unserem Link unter Verwendung der relativen Positionierung an. Als Nächstes möchten wir ein abgerundetes Feld erstellen, das den Hauptteil des Tooltips bildet, und es so positionieren, dass es über dem Link schwebt:
.tooltip:hover:after{
Hintergrund: #333;
Hintergrund: rgba(0,0,0,.8);
Randradius: 5px;
unten: 26px;
Farbe: #fff;
Inhalt: attr(title);
links: 20 %;
Polsterung: 5px 15px;
Position: absolut;
Z-Index: 98;
Breite: 220px;
}
Wir verwenden den :hover-Selektor, der beim Mouseover ein Element, in diesem Fall unseren Link, auswählt, und den :after-Selektor, der Inhalte nach dem ausgewählten Element einfügt. Wir haben einen schwarzen Hintergrund mit 80 % Deckkraft angegeben und für Browser, die keine RGBA-Farben unterstützen, haben wir einen dunkelgrauen Hintergrund bereitgestellt.
Leicht abgerundete Ecken werden mithilfe des Attributs border-radius erstellt und wir haben die Textfarbe auf Weiß eingestellt. Zuletzt haben wir das Tooltip-Feld links vom Link positioniert und etwas Polsterung hinzugefügt.
Neben dem Styling und der Positionierung haben wir auch die Content-Eigenschaft festgelegt:
Inhalt: attr(title);
Mit dieser Eigenschaft können wir den gewünschten Inhalt einfügen, der eine Zeichenfolge, eine Mediendatei oder ein Attribut des Elements sein kann. In diesem Fall verwenden wir das Titelattribut des Links.
Wenn Sie nun mit der Maus über Ihren Link fahren, sollte darüber ein Tooltip mit dem Text erscheinen, den Sie als Linktitel festgelegt haben. Wir haben jedoch ein Problem: Die Titelinformationen werden zweimal angezeigt: einmal im Tooltip und einmal im Browser. Um dies zu beheben, müssen wir eine kleine Änderung an unserem HTML vornehmen:
Was wir hier gemacht haben, ist, den Linktext in ein Span-Tag mit einem eigenen Title-Attribut zu packen. Jetzt zeigt der Browser den im Span-Tag festgelegten Titel an, wenn der Mauszeiger über den Link bewegt wird.
Zum Abschluss fügen wir am unteren Rand des Tooltips einen Pfeil hinzu, um ihm das gewisse Extra an Stil zu verleihen. Wir tun dies, indem wir den :before-Selektor und einige Rahmenstile verwenden:
.tooltip:hover:before{
Rand: fest;
Randfarbe: #333 transparent;
Randbreite: 6px 6px 0 6px;
unten: 20px;
Inhalt: “”;
links: 50 %;
Position: absolut;
Z-Index: 99;
}
Wir verwenden hier ein paar Rand-Hacks, um den Effekt eines Pfeils zu erzeugen: indem wir die Randfarben links und rechts auf transparent setzen und die Randbreiten steuern. Wir haben den Pfeil außerdem so positioniert, dass er sich am unteren Rand des Tooltip-Felds befindet.
Und da haben Sie es, einen einfachen Tooltip mit dem Titel-Tag des Elements, über dem Sie schweben. Sie können dies auch für Bild-Alt-Tags verwenden oder einfach Ihren eigenen Text in das CSS einfügen, damit er an der gewünschten Stelle angezeigt wird.
Sie können a anzeigen funktionierende Demo hier.
Wie erstellt man Tooltips? Haben Sie diese Technik auf einer Website verwendet? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Hinweisbild über Shutterstock.
