Suche nach als

Links Tip

Auf dieser Seite:

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 TipCss 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.


Valid XHTML 1.0 Check den Code.

Bilder >> << Links
Ich bin hier: > CSS Lehrling >> Links Tip
 
HTML und XHTML | CSS | JavaScript und DHTML | PHP und MySQL | Andere Sprachen
Letzter Update: 24.03.2010