Textlink als Tooltip,
onMouseover Tooltip mit CSS erstellt.
Tooltips, Quickinfo oder auch Kurzinfo sind die geläufigen Begriffe für die kleinen Popups, die sich öffnen, wenn man mit der Maus über einen Textlink oder Grafiklink fährt. In diesen Popups werden dann weitere nützliche Informationen für den Nutzer zu dem entsprechenden Objekt erläutert.
Tooltips haben auch einen suchmaschinenfreundlichen Charakter, denn im Quellcode steht zusätzlicher Text, der von den Suchmaschinen gelesen und verarbeitet wird, aber im Browserfenster keinen Platz verbraucht und nicht das Gesamtbild der Webseite stört.
Mit CSS hat man nun viele Möglichkeiten diese Tooltips oder Quickinfos zu gestalten.
Beispiel für einen Tooltip mit CSS
Beispieltext.
Lorem ipsum dolor sit amet, consectetuer Tooltip lobortis nisl ut aliquip ex ea commodo elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Damit der Tooltip dargestellt wird, muss das HTML folgendermassen aussehen:
<a class="tip" href="#">tooltip<span> Hier stehen die Informationen des Tooltip</span></a>
Das dazugehörige CSS
Dies kann wahlweise direkt in den Quellcode des Dokumentes eingebunden werden
<head>
<style type="text/css">
<!--
Hier steht der Code
–>
</style>
</head>
oder über eine externe CSS-Datei eingebunden werden
<link href="tip.css" rel="stylesheet" type="text/css"/>
.tip { border-bottom:1px dotted #000000;
cursor:help;
}
a.tip,
a.tip:link,
a.tip:visited,
a.tip:active { color: #616161; text-decoration: none; position: relative; }
a.tip:hover {
background: transparent;
z-index: 100;
}
a.tip span {
display: none;
text-decoration: none;
}
a.tip:hover span {
display: block;
position: absolute;
top: 40px;
left: 0;
width: 200px;
z-index: 100;
color: #2f2f2f;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
padding: 2px 10px;
background-color: #ebebeb;
text-align: left;
border-color: #780303;
border-style: solid;
border-width: 1px 4px; }
