Infowolken am Mauszeiger mit CSS
Das Erzeugen einer Infowolke am Mauszeiger gelingt mit reinem CSS, also ohne den Einsatz von Bildern oder gar Javascript. Wir zeigen Ihnen wie es geht.
© Archiv
Wer auf überflüssiges Markup verzichten möchte und bereits HTML5 einsetzt, kann anstelle des title-Attributs das benutzerspezifierbare data-Attribut nutzen. Zum Beispiel so:
a[data-infowolke]:link, a[data-infowolke]:visited {
position: relative;
text-decoration: none;
border-bottom: solid 1px;
}
a[data-infowolke]:before {
content: "";
position: absolute;
border-top: 20px solid #0090ff;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}
a[data-infowolke]:after {
content: attr(data-infowolke);
position: absolute;
color: white;
top: -35px;
left: -26px;
background: #0090ff;
padding: 5px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
white-space: nowrap;
visibility: hidden;
}
a[data-infowolke]:hover:before, a[data-infowolke]:
hover:after {
visibility: visible;
-moz-transition: visibility 0s linear .3s;
} Die Infowolke entsteht so auf Basis eines Dreiecks und eines Kastens mit abgerundeten Ecken (im Internet Explorer 8 kommen die abgerundeten Ecken allerdings nicht zum Vorschein). Die Werkzeugspitze wird relativ zur linken oberen Ecke des betreffenden Elementes daran angehängt, denn diese Positionierung hilft, einen unerwünschten Umbruch zu verhindern.
© Internet Magazin
Die Positionierung erfolgt mit Pixelgenauigkeit; die vermeidet Überraschungen, die sich aus dem Einsatz von Prozenteinheiten ergeben können.Der Attributselektor adressiert nur solche Verknüpfungen auf der Website, welche mit dem Attribut data-infowolke versehen sind. Den Text der Wolke entnimmt der Browser dem jeweiligen Wert dieses Attributs.Außerdem kommt zur Auszeichnung der Links anstelle von text-decoration die Eigenschaft border-bottom zum Einsatz, denn Erstere hätte das Unterstrichen der Texte innerhalb einer Wolke zur Folge.Anstelle von visibility: hidden; können Sie die Eigenschaft display: none; verwenden, nicht jedoch die Eigenschaft opacity. Eine noch nicht sichtbare Infowolke würde beim Kontakt mit der Maus bereits den hover-Zustand auslösen.
