jquery.hermione.de

Tooltipps

Tags	Tooltipp
Abstract	Ein DIV wird angezeigt, wenn sich die Maus ueber dem ausloesenden Objekt befindet.
Zuletzt geaendert	2010-01-06 (von 2008-03-28)
Browser (getestet)	FF3.5, IE8
jQuery Version	1.3.2
Plugins
Demos	Tooltipp mit jQuery
Hilfreiche Links	Klassische Tooltipps Tooltipp Libary von Walter Zorn (dt.) ImageSnap Tutorial WebImageSnap fuer jQuery Itemliste von fwuniques.ath.cx Beispiel fuer jQuery Tooltipps

HTML (bei Inhalt DIV im A-Tag)

In den Attributen des A-Tags werden alle Informationen untergebracht, die der Tooltipp benoetigt. Im Beispiel steht im HREF-Attribut die URL des Bildes, das im Tooltipp angezeigt werden soll und im NAME-Attribut der Text. Das DIV des Tooltipps hat eine vorgegebene ID und ist fuer jeden Tooltipp dieser Art gleich.


<a href="http://jquery.hermione.de/img/jquerylogo.png" name="jQuery Logo" class="jqtt">jQuery Logo</a>

Tooltipp Icon anhaengen

An den Tooltipp Link wird ein kleines Symbol angehaengt, das auf den Tooltipp hinweisen soll.


$(".jqtt").append("✵");

Tooltipp Function

JQuery hover wertet zwei Funktionen aus: Die erste wird beim MouseIn-Event, die zweite wird beim MouseOut Event ausgefuehrt.


   /* show tooltipp function */
   $(".jqtt").hover(function(e) {
      var tg = $(e.target).is("a") ? $(e.target) : $(e.target).parents("a");


      // tooltipp html
      var tthtml = '<div id="tooltipp" class="jqtt">'
         + '<img src="' + tg.attr('href') + '" align="left">'
         + '<h4 class="jqtt">' + tg.attr('name') + '</h4>'
         + '<p><i>Tooltipp mit jQuery</i></p>'
         + '</div>';

      $(tthtml).appendTo("body");

      $("#tooltipp")
         .css({
            left: (e.pageX + 10) + 'px',
            top: (e.pageY + 10) + 'px'})
         .show();


   },function(e) {
      $("#tooltipp").remove();
   });

CSS Stylesheets

Das div, das den Tooltipp enthaelt, ist zu Beginn versteckt (display: none). Die Position des DIVs wird nicht im CSS Teil angegeben, sondern im Javascript, da die Position aus der Mauszeiger-Position ermittelt wird.


/* tooltipp div */
div.jqtt {
   display: none;
   position: absolute;
   z-index: 100;
   width: 330px;
   padding: 5px;
   background-color: #FAF1F6;
   border: 2px solid #F4DFE9;
}

HTML (bei DIV ID aus NAME Attribute des A-Tags)

Anstatt den Inhalt des Tooltipps im A-Tag zu verstecken, kann auch ueber das name-Attribute auf ein DIV-Element verwiesen werden, das dann den Tooltipp enthaelt. Das DIV-Element kann frei gestaltet werden. Der Trick dabei ist, dass der Inhalt des Name-Attributes der ID des DIV-Elements entspricht. Im Beispiel wuerde man also ein DIV mit id="jqlogo" benoetigen.


<a name="jqlogo" class="jqtt">jQuery Logo</a>

HREF werden von IE und FF unterschiedlich ausgewertet!

Das HREF-Attribut wird von FF und IE unterschiedlich ausgewertet. FF nimmt den String wie er im Attribut steht. IE vervollstaendigt den Inhalt des href-Attributs, so dass er immer mit "http://www...." beginnt. Deshalb ist das NAME-Attribut besser als das HREF-Attribut geeignet, um darin Informationen fuer Tooltipps zu speichern.

✵ jQuery.HERmione.de ✍