Tooltips mit und ohne Javascript

[TIP:Tooltips=Das hier ist ein Tooltip.] sind kleine Infofenster, die erscheinen sobald der Besucher mit dem Mauszeiger über einen bestimmten Bereich der Webseite fährt (hover-Effekt). Über solche Tooltips lassen sich platzsparend zusätzliche Informationen wie z.B. Hilfetexte unterbringen, ohne dass diese immer sichtbar sind.

Tooltips ohne Javascript

Sollen die Tooltips auch ohne aktiviertes Javascript bei allen Besuchern funktionieren, muss der Tooltip allein mit CSS realisiert werden:

[TIP:Beispiel 1=Das ist ein Tooltip, der auch ohne Javascript funktioniert.]

HTML:

<a class="tooltip" href="javascript:;">
  Beispiel 1
  <span>
    Das ist ein Tooltip, der auch <b>ohne</b> Javascript funktioniert.
  </span>
</a>

Minimalistisches CSS ohne Farben und Rahmen:


a.tooltip {
	position: relative;
}

a.tooltip span {
	display: none;
}

a.tooltip:hover {
	z-index: 100;
	background: transparent; /* must be set for ie6 */
}

a.tooltip:hover span {
	display: block;
	position: absolute; 
	top: 1.4em;
	left: 0;
	width: 200px;
	padding: 0.3em;
}

Eine solche Lösung bring jedoch auch Nachteile und Einschränkungen mit sich.

  1. Der Hover-Effekt tritt leider immer sofort ein. Wenn der Mauszeiger also aus Versehen über einen Tooltip gezogen wird flackert der Tootlip kurz auf und verschwindet sogleich wieder. Werden mehrere Tooltips auf einer Webseite eingesetzt kann dieses Flackern sehr lästig sein.
  2. Es sind keine visuellen Effekte beim Ein- und Ausblenden des Info-Fensters möglich.
  3. Der Möglichkeiten HTML-Code innerhalb des Infofensters einzusetzen sind begrenzt, da sich dieses ja innerhalb des a-tags befindet.

Zeitverzögerte Tooltips mit Javascript

Das Folgende Tooltip funktioniert mit Javascript (jQuery) und verfügt über eine Zeitverzögerung und einen Fade-Effekt. Das Infofenster erscheint mit kurzer Verzögerung nur, wenn der Mauszeiger auf dem Link stehen bleibt.

Beispiel 2

Tooltip mit Javascript

Ein Tooltip mit Zeitverzögerung

HTML:

<a class="jstooltip" href="javascript:;">Beispiel 2</a>
<div>
  <h4>Tooltip mit Javascript</h4>
  <p>Ein Tooltip mit Zeitverzögerung</p>
</div>

Minimalistisches CSS ohne Farben und Rahmen:

a.jstooltip {
  cursor: help;
}

div.jstooltext {
  display: none;
  margin: 10px 0 0 30px;
  padding: 0.5em;
  position: absolute;
  width: 250px;
  line-height: 1.3em;	  
}

Javascript
Benötigt wird die jQuery Bibliothek und die jQuery-Erweiterung hoverIntent.
Mit folgenden Zeilen lässt sich der zeitverzögerte Tooltip realisieren:

$(document).ready(function() {
	$(".jstooltip").hoverIntent(pwshow, pwhide);	
	$(".jstooltip").next("div").addClass('jstooltext').hide();
	function pwshow(){  $(this).next("div").fadeIn(); }
	function pwhide(){ $(this).next("div").fadeOut(); }
});

Die gewünschten Effekte zum Ein- und Ausblenden (fadeIn & fadeOut) lassen sich in diesem Beispiel leicht anpassen.