Links Tip
Text Link Tip
Die meisten Tooltips sind Javascript. Dieses hier besteht bloss aus HTML Links und Span-Tags mit CSS. Eigentlich sind es Links Tips. Sie beruhen auf der Pseudoklasse a:hover.
So wird ein Tooltip über einem Text-LinkCss Links Tips sind super einfach.
Sie können mehrzeilig sein. eingerichtet:
<a href="#">Text-Link<span>Css Links Tips sind super einfach.<br />Sie können mehrzeilig sein.</span></a>
Bild Link Tip
Und so wird ein Link Tip über ein
Css Links Tips
können auch
über einen
Bildlink
genutzt werden.nfo Bild angesprochen:
<a href="#"><img src="images/info.jpg" border="0"><span>Css Links Tips<br />... </span></a>
Link Tip CSS
a:hover
Die Container können beliebig gestylt werden.
<style type="text/css">
a{ z-index: 10; }
a:hover {
position: relative;
z-index: 100;
}
a span { display:none; }
a:hover span {
display: block;
position: absolute;
float: left;
white-space: nowrap;
z-index: 10;
/* style hier: */
top: -3em;
left: 3em;
background: #fffcd1;
border: 2px solid #e5e5e5;
color: #444;
padding: 2px 5px;
}
</style>
Mehr
Einen komplizierteren Tip über Links gibt es auch als: Tool Tip (mit Javascript)
Unterschied: Der Tip bewegt sich mit dem Mauszeiger.