Tooltip [jquery]

2008-03-28 | 2:25 pm | Kein Kommentar »

Tooltip mit jquery

Der Inhalt des Tooltips wird aus den Attributen „href“ und „name“ genommen und in das tooltip-div geschrieben. Die Position des Tooltip divs wird aus der Position des Mauszeigers ermittelt.

Ein Tooltip (auch »Quickinfo«, »Kurzinfo«; sinngemäß übersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster in einer grafischen Benutzeroberfläche, das dem Benutzer weitere Informationen zu einem Objekt anzeigt. Es wird zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder Bildchen in Computerprogrammen, verwendet und erscheint, wenn der Mauszeiger eine gewisse Zeit über dem entsprechenden Objekt verbleibt.

javascript

//an den tooltip-link wird das kleine image angehaengt,
// das auf den tooltip hinweisen soll
$(".jqtooltip").append("<img src='http://www.hermione.de/Img/tt.gif' border='0' />");

$(".jqtooltip").hover(function(e) {
   trgt = $(e.target).is("a") ? $(e.target) : $(e.target).parents("a");

   //tooltip html
   html = "<div id='ttooltipp' class='ttooltipp_style'><img src='"
      + trgt.attr("href")
      + "' border='0' />"
      + "<br>"
      + trgt.attr("name")
      + "<br><i>Tooltip mit jquery</i></div>";
   $(html).appendTo("body");

   //position
   $('#ttooltip').css({
      left: (e.pageX + 10) + 'px',
      top: (e.pageY + 10) + 'px'});

   $('#ttooltip').show();
},function(e) {
   $('#ttooltip').remove();
});

stylesheets

.ttooltip_style {
   text-align: center;
   font: 1em Arial,Helvetica,sans-serif;
   border: solid 3px #ddd;
   background-color: #fff;
   padding: 3px;
   position: absolute;
   z-index: 100;
}

html

<a href="http://www.hermione.de/Img/steine2.thn.JPG" name="ein Tooltip" class="jqtooltip">Tooltip</a>

links

Sag etwas dazu: