{"id":94,"date":"2008-03-28T14:25:14","date_gmt":"2008-03-28T12:25:14","guid":{"rendered":"http:\/\/www.hermione.de\/blog\/?p=94"},"modified":"2008-06-05T17:31:08","modified_gmt":"2008-06-05T15:31:08","slug":"image-tooltipp-jquery","status":"publish","type":"post","link":"http:\/\/blog.hermione.de\/?p=94","title":{"rendered":"Tooltip [jquery]"},"content":{"rendered":"<h4>Tooltip mit jquery<\/h4>\n<p>Der Inhalt des Tooltips wird aus den Attributen &#8222;href&#8220; und &#8222;name&#8220; genommen und in das tooltip-div geschrieben. Die Position des Tooltip divs wird aus der Position des Mauszeigers ermittelt.<\/p>\n<p>Ein <a href=\"http:\/\/www.hermione.de\/Img\/steine2.thn.JPG\" title=\"ein Tooltip\" name=\"ein Tooltip\" class=\"jqtooltip\">Tooltip<\/a> (auch \u00bbQuickinfo\u00ab, \u00bbKurzinfo\u00ab; sinngem\u00e4\u00df \u00fcbersetzt: Hilfe zu einem Werkzeug) ist ein kleines <a href=\"http:\/\/www.hermione.de\/Img\/wasser10.thn.JPG\" title=\"ein Fensterlein\" name=\"ein Fensterlein\" class=\"jqtooltip\">Fenster<\/a> in einer grafischen Benutzeroberfl\u00e4che, das dem Benutzer weitere Informationen zu einem Objekt anzeigt. Es wird zum Beispiel in <a href=\"http:\/\/www.hermione.de\/Img\/holz2.thn.JPG\" title=\"viele Browser\" name=\"viele Browser\" class=\"jqtooltip\">Browsern<\/a> zur Beschreibung von Links oder zur Erkl\u00e4rung von Icons, d.h. Symbolen oder Bildchen in Computerprogrammen, verwendet und erscheint, wenn der <a href=\"http:\/\/www.hermione.de\/Img\/rost3.thn.JPG\" title=\"Katzen und M\u00e4use\" name=\"Katzen und M\u00e4use\" class=\"jqtooltip\">Mauszeiger<\/a> eine gewisse Zeit \u00fcber dem entsprechenden Objekt verbleibt.<br \/>\n<!--more--><\/p>\n<h4>javascript<\/h4>\n<table class=\"rosa\">\n<tbody>\n<tr>\n<td>\n<pre><code><strong>\/\/an den tooltip-link wird das kleine image angehaengt,\r\n\/\/ das auf den tooltip hinweisen soll<\/strong>\r\n$(\".jqtooltip\").append(\"&lt;img src='http:\/\/www.hermione.de\/Img\/tt.gif' border='0' \/&gt;\");\r\n\r\n$(\".jqtooltip\").hover(function(e) {\r\n   trgt = $(e.target).is(\"a\") ? $(e.target) : $(e.target).parents(\"a\");\r\n\r\n   <strong>\/\/tooltip html<\/strong>\r\n   html = \"&lt;div id='ttooltipp' class='ttooltipp_style'&gt;&lt;img src='\"\r\n      + trgt.attr(\"href\")\r\n      + \"' border='0' \/&gt;\"\r\n      + \"&lt;br&gt;\"\r\n      + trgt.attr(\"name\")\r\n      + \"&lt;br&gt;&lt;i&gt;Tooltip mit jquery&lt;\/i&gt;&lt;\/div&gt;\";\r\n   $(html).appendTo(\"body\");\r\n\r\n   <strong>\/\/position<\/strong>\r\n   $('#ttooltip').css({\r\n      left: (e.pageX + 10) + 'px',\r\n      top: (e.pageY + 10) + 'px'});\r\n\r\n   $('#ttooltip').show();\r\n},function(e) {\r\n   $('#ttooltip').remove();\r\n});<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>stylesheets<\/h4>\n<table class=\"rosa\">\n<tbody>\n<tr>\n<td>\n<pre><code>.ttooltip_style {\r\n   text-align: center;\r\n   font: 1em Arial,Helvetica,sans-serif;\r\n   border: solid 3px #ddd;\r\n   background-color: #fff;\r\n   padding: 3px;\r\n   position: absolute;\r\n   z-index: 100;\r\n}<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>html<\/h4>\n<p><code> <\/code><\/p>\n<pre>\r\n&lt;a href=\"http:\/\/www.hermione.de\/Img\/steine2.thn.JPG\" name=\"ein Tooltip\" class=\"jqtooltip\"&gt;Tooltip&lt;\/a&gt;<\/pre>\n<h4>links<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.walterzorn.com\/tooltip\/tooltip_e.htm\">Klassische Tooltips<\/a><\/li>\n<li><a href=\"http:\/\/www.vogel-nest.de\/wiki\/Main\/ImageSnap\">Tooltips mit jquery<\/a> (jquery tutorial)<\/li>\n<li><a href=\"http:\/\/fwuniques.ath.cx\/uniques\/index.php?mode=countitems\">schoenes Beispiel<\/a> (techni uniques originalitems)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Tooltip mit jquery Der Inhalt des Tooltips wird aus den Attributen &#8222;href&#8220; und &#8222;name&#8220; genommen und in das tooltip-div geschrieben. Die Position des Tooltip divs wird aus der Position des Mauszeigers ermittelt. Ein Tooltip (auch \u00bbQuickinfo\u00ab, \u00bbKurzinfo\u00ab; sinngem\u00e4\u00df \u00fcbersetzt: Hilfe zu einem Werkzeug) ist ein kleines Fenster in einer grafischen Benutzeroberfl\u00e4che, das dem Benutzer weitere [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/94"}],"collection":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=94"}],"version-history":[{"count":1,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":246,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/94\/revisions\/246"}],"wp:attachment":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}