Wie erstelle ich einen einfachen CSS3 Tooltip

Mithilfe von QuickInfos können Sie Ihrem Benutzer mehr Informationen anzeigen, indem Sie den Mauszeiger über ein Bild oder einen Text bewegen. Sie können beispielsweise verwendet werden, um Bildunterschriften oder längere Beschreibungen für Links oder nützliche Informationen bereitzustellen, die die Benutzererfahrung Ihrer Website verbessern, ohne in das Design einzugreifen.

Heute zeige ich Ihnen, wie Sie einen einfachen Tooltip mit HTML und CSS erstellen, um das Title-Tag Ihrer Hyperlinks anzuzeigen.

Beginnen wir damit, ein einfaches Markup für den Link zu erstellen. Wir müssen ihm einen Titel geben, der der Tooltip-Inhalt sein wird, und ihm eine Klasse zuweisen:

CSS3 Tooltip

Der nächste Schritt besteht darin, ein rudimentäres Styling für unsere Tooltip-Klasse zu erstellen:

.tooltip{display: inline;position: relative;}

Wir zeigen nun unseren Tooltip inline mit unserem Link unter Verwendung der relativen Positionierung an. Als nächstes möchten wir die runde Box erstellen, um den Körper des Tooltips zu bilden, und ihn so positionieren, dass er über dem Link schwebt:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Wir verwenden den: hover-Selektor, der ein Element, in diesem Fall unseren Link, bei mouseover und dem: after-Selektor auswählt, der Inhalt nach dem ausgewählten Element einfügt. Wir haben einen schwarzen Hintergrund mit einer Deckkraft von 80% angegeben und für Browser, die RGBA-Farben nicht unterstützen, haben wir einen dunkelgrauen Hintergrund angegeben.

Geringfügig abgerundete Ecken werden mithilfe des Attributs border-radius erstellt, und die Textfarbe wurde auf weiß gesetzt. Schließlich haben wir das Tooltip-Feld von der linken Seite des Links positioniert und ein wenig Polsterung hinzugefügt.

Neben dem Styling und der Positionierung haben wir die Content-Eigenschaft festgelegt:

content: 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 title-Attribut des Links.

Wenn Sie nun den Mauszeiger über Ihren Link bewegen, sollte ein Tooltip darüber mit dem Text angezeigt werden, den Sie als Link-Titel 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:

CSS3 Tooltip 

Was wir hier getan haben, ist, den Linktext in ein Span-Tag mit einem eigenen title-Attribut einzubinden. Jetzt zeigt der Browser den Titel an, der im span-Tag festgelegt wurde, wenn der Link über den Link verschoben wird.

Zum Schluss fügen wir am unteren Rand des Tooltips einen Pfeil hinzu, um ihm einen Hauch von Stil zu verleihen. Wir machen das mit dem: before selector und einigen border styles:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Wir verwenden hier ein paar Border-Hacks, um den Effekt eines Pfeils zu erzeugen: Setzen Sie die Randfarben links und rechts auf transparent und kontrollieren Sie die Randbreiten. Wir haben den Pfeil auch so positioniert, dass er unten auf der Tooltip-Box liegt.

Und da hast du es, einen einfachen Tooltip mit dem Title-Tag des Elements, über dem du schwebt. Sie können dies auch für Bild-Alt-Tags verwenden oder einfach Ihren eigenen Text in das CSS einfügen, um dort aufzuschalten, wo Sie möchten.

Sie können a anzeigen Arbeitsdemo hier .

Wie erstellst du Tooltips? Hast du diese Technik auf einer Site verwendet? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Tippbild über Shutterstock.