{"id":5776,"date":"2019-12-06T13:28:28","date_gmt":"2019-12-06T18:28:28","guid":{"rendered":"https:\/\/www.rushworth.us\/lisa\/?p=5776"},"modified":"2019-12-06T13:28:28","modified_gmt":"2019-12-06T18:28:28","slug":"displaying-an-image-tooltip","status":"publish","type":"post","link":"https:\/\/www.rushworth.us\/lisa\/?p=5776","title":{"rendered":"Displaying An Image Tooltip"},"content":{"rendered":"<p>JQuery developers seem to have put a lot of effort into filtering HTML components out of tooltips &#8230; which, as someone who visits a website &#8230; is A Good Thing. But what&#8217;s a good security consideration can be a massive pain when building a website. I have a form which takes an internal ID number, and I have an image showing people how to <em>find<\/em> that internal ID number. I <em>want<\/em> a little question mark after the field name that pops up the image as a tooltip on mouseover events. And clears the image on mouseout.<\/p>\n<p><strong>JavaScript:<\/strong><\/p>\n<pre>\/\/ Show finding equipment ID image \"tooltip\" \r\n$('#ShowEquipmentIDTip').hover(\r\n\tfunction(){\r\n        \t$('#FindingEID').css({ \"display\": \"block\" });\r\n    \t}\r\n\t,function(){\r\n        \t$('#FindingEID').css({ \"display\": \"none\" });\r\n    \t}\r\n);<\/pre>\n<div><strong>HTML:<\/strong><\/div>\n<pre>&lt;div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\"&gt;\r\n\t&lt;span&gt;&lt;strong&gt;Equipment ID(s): &lt;a id=\"ShowEquipmentIDTip\" href=\"#\"&gt;(?)&lt;\/a&gt;&lt;\/strong&gt;&lt;\/span&gt;\r\n\t&lt;div id=\"FindingEID\" style=\"position: relative;top: 20;left: 60;width: 100%;height: 100%;z-index:99;display:none\"&gt;&lt;img src=\"\/groomsGenerateCircuitReport\/images\/Tip-FindingEquipmentID.png\" \/&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Moving your mouse over the ShowEquipmentIDTip a element displays the div which contains my image &#8220;tooltip&#8221; and moving the mouse away sets the display back to none.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JQuery developers seem to have put a lot of effort into filtering HTML components out of tooltips &#8230; which, as someone who visits a website &#8230; is A Good Thing. But what&#8217;s a good security consideration can be a massive pain when building a website. I have a form which takes an internal ID number, &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[855,765,856,854],"class_list":["post-5776","post","type-post","status-publish","format-standard","hentry","category-coding","tag-css","tag-html","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/5776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5776"}],"version-history":[{"count":1,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/5776\/revisions"}],"predecessor-version":[{"id":5777,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=\/wp\/v2\/posts\/5776\/revisions\/5777"}],"wp:attachment":[{"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rushworth.us\/lisa\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}