Einen reinen CSS-Tooltip ohne JavaScript erstellen
Tooltips (Kurzinfos/Quickinfos) sind Boxen mit zusätzlichen Informationen, welche erscheinen, wenn der Mauszeiger über einem bestimmten Element einer Webseite ist. Sie sind ein großartiger Weg, einem User zu helfen, durch eine unvertraute Oberfläche zu navigieren, ohne ihn mit zu viel Information zu überhäufen. Heute bauen wir uns selbst einen HTML und CSS Tooltip.
Das Dokument aufsetzen
Zuallererst müssen wir ein HTML -Dokument erstellen und das anfängliche Gerüst aufsetzen.
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>CSS tooltip</title> <link rel="stylesheet" href="css/reset.css"> </head> <body> </body> </html>
Man kann sehen, dass ich reset.css verlinke, dass hilft alle Default-Browser-Styles zurückzusetzen und es stellt sicher, dass jedes Element in jedem Browser gleich aussieht. Quelle: http://meyerweb.com/eric/tools/css/reset/ Schauen wir uns das Anchor-Tag mal näher an:
<a href="#" title="Hallo! This is a tooltip, hope you like it! :)" class="tooltip">Hover me for more information</a>
Ich werde Tooltips mit Title-Tag nutzen, so dass der Inhalt bei title=““ als Tooltip angezeigt wird. Ich habe dem Element eine Klasse zugeordnet, so dass die Tooltip-Class für den Main Body/Style eines Tooltips zuständig ist.
Erstellen der .tooltip class
Hier der CSS Code für unsere primäre .tooltip class
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
background: #444;
border-radius: 8px;
color: #fff;
content: attr(title);
margin: -82px auto 0;
font-size: 16px;
padding: 13px;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #444 transparent;
border-width: 12px 6px 0 6px;
content: "";
left: 45%;
bottom: 30px;
position: absolute;
}
Der Tooltip selbst ist ein :after pseudo-element, mit absoluter Position. Deshalb müssen wir dem Anchor-Element eine relative Position zuordnen. Ich habe ein paar einfache Styles hinzugefügt, wie Abstände, Umrandungen, Schriftgröße und -Stärke (padding, border, font size and weight). Wenn man aber mal einen näheren Blick auf die Content-Property wirft, sieht man, dass sie einen attr() -Wert hat, der unser „title“-Tag beinhaltet und dessen Inhalt benutzt, um ihn in unserem Tooltip anzuzeigen. Damit unser Tooltip einen einfachen Animationseffekt erhält, werden wir die Transition-Eigenschaft benutzen, aber das ist nicht nötig, wenn Du keine Effekte magst. Demo Ich denke, viel mehr gibt’s dazu nicht mehr zu sagen. Um Tooltips zu benutzen, wende die .tooltip class einfach auf dein Element an, und befülle das title -Attribut mit deinem Inhalt. Du kannst sie dann so stylen, dass sie zum Design deiner eigenen Website passt. Zudem kannst du auch die Dauer und Geschwindigkeit der Animation ändern.
Das könnte Dich auch interessieren
Totgesagte leben länger — oder: Wie die redaktionellen Newsletter des SÜDKURIER zum Content-Marketing-Tool umgebaut wurden
Mit dem Aufkommen von Facebook, Twitter und Co. wurde vor einigen Jahren der Niedergang des Newsletters prophezeit. Dennoch ist das klassische E-Mail-Marketing ...
Storytelling: Die Macht der Geschichten
„Humans are not ideally set up to understand logic. They are ideally set up to understand stories“, sagt der amerikanische Kognitionswissenschaftler und Pä...
Wie implementiert man Dark Modus für Webseiten?
Während des Halunken-Hack der Media Favoriten, hatte ich ein Projekt vorbereitet, bei dem es um die Implementierung des Dark Modus für die SÜDKURIER Seite gi...