Trick # 473 | Dieser Beitrag beinhaltet 544 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Tool-Tipps sind kleine Erklärungstexte, welche beim Hovern z.B. über einen Text angezeigt werden. Die Tool-Tipps erscheinen meist in langweiligem grau-in-grau. Doch das muss nicht sein. Richtig coole Tool-Tipps sind nämlich im Handumdrehen möglich.
Alles, was Sie benötigen, ist ein wenig HTML-Code und ein CSS-Block. Schon sind Sie ready.
Kopieren Sie etwa den folgenden HTML-Text in Ihren WYSIWYG-Editor. Verwenden Sie dabei die Text- oder HTML-Ansicht, damit der Code nicht verstümmelt wird:
<a href="#" class="tooltip" data-tooltip="Dies ist die Zusatzinfo. Nett und auffällig gemacht.">Hier verbirgt sich ein Tool-Tipp.</a>Nun folgt der CSS-Block, den Sie kopieren können und in Ihr CSS-Stylesheet (im WordPress-Backend unter Design/Customizer/Zusätzliches CSS) einfügen können:
a.tooltip {
position: relative;
}
a.tooltip:after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 20%;
background: #59B14B;
padding: 5px 15px;
color: #000000;
font-size: 16px;
-webkit-border-radius: 10px;
-moz-border-radius : 10px;
border-radius : 10px;
white-space: nowrap;
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
}
a.tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid #59B14B;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
opacity: 0;
left: 30%;
bottom: 90%;
}
a.tooltip:hover:after {
bottom: 100%;
}
a.tooltip:hover:before {
bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
opacity: 1;
}Natürlich sind jegliche Anpassungen möglich: Die Farben, Schriftgrössen und vieles mehr.
Probieren wir’s doch gleich mal aus. Bewegen Sie die Maus über den folgenden Link:
Hier verbirgt sich ein Tool-Tipp.
Recht cool, wie wir finden.
Werbung
Werbung
