Tooltip
Ein einfacher Tooltip für Bilder und Links. Benötigt wird hierfür JQuery und ein Tooltip script. Der Einbau in die Homepage ist relativ einfach. Die Popup´s gehen von der Distanz des Cursers (Maus) auf.
Tooltip für Bilder und Links
Schritt 1.
JQuery einbinden im Header der Seite:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tooltip.js"></script>
Schritt 2.
Der Aufruf für Bilder ist:
<a href="images/mondero-hover.jpg" class="preview" title=""><img src="images/mondero.jpg" alt="gallery thumbnail" /></a>
Der Aufruf für Links ist:
<a href="#" class="tooltip" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr">ein Link</a>
Schritt 3.
CSS3
/* für die Links */
#tooltip {
position:absolute;
font-size: 13px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
/* für die Bilder */
#preview{
position:absolute;
padding:5px;
display:none;
color:#fff;
}
Die Rahmen für die Bilder sind mit CSS3 gemacht und alles weitere ist in der Demo zu sehen.
Fazit: Der Tooltip ist schnell eingebaut und das Java Script ist auch leicht verständlich. Ab Zeile 42 steht der Code für Bilder, alles oberhalb ist für die Links. Die Funktion ist ganz nett, nur bei kleinen Bildschirmen gehen Bilder bei Hover über den Rand rechts hinaus. Bei Link-Tooltips passt sich der Text dem Rand an, dennoch danke an Alen Grakalic für das Script.
