{"id":1173,"date":"2012-09-16T08:15:58","date_gmt":"2012-09-16T08:15:58","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1173"},"modified":"2012-09-16T08:15:58","modified_gmt":"2012-09-16T08:15:58","slug":"jquery-on-rollover-show-title-show-div-image-etc-title-on-hover","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-on-rollover-show-title-show-div-image-etc-title-on-hover\/","title":{"rendered":"jQuery On Rollover Show Title (Div Title, Image Title, etc.)"},"content":{"rendered":"<p>If you have been wanting to <strong><em>show title of an image or a div or any other element on hover or when you rollover that element<\/em><\/strong>, then you are reading the right article. In this article, I am going to share an easy way to show \/ alert title on rollover \/ hover of any element that you choose and also attach custom functionality that will trigger automatically, when you <strong>hover away from the div \/ image \/ other element<\/strong>. Read on to find out more.<!--more--><\/p>\n<h2>Examples to Show Div, Image, etc.title on Hover using jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1173\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>For this example, I am assuming that I have a Div with ID &#8220;my_div&#8221; and it&#8217;s title is &#8220;My DIV title&#8221;. Now I want to show the Div&#8217;s title when I rollover the mouse over this div.<\/p>\n<h3>Example 1: Alert Div Title onRollover \/ upon Hover using jQuery<\/h3>\n<p>Here is the complete source code (HTML + jQuery):<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery On Rollover Show Title of Div, Image, etc.&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n\n&lt;style type=\"text\/css\"&gt;\n#my_div {\nborder: 1px solid #060;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;div id=\"my_div\" title=\"My DIV title\"&gt;This is my existing div.&lt;\/div&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#my_div').hover(function() {\n\nvar title = $(this).attr('title');\nalert( 'Div Title is: '+ title );\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>In the above example, the title of the Div is alerted when you rollover it or hover mouse upon it. This can be further modified to attach a custom functionality that can be trigger another action, when you rollout or hover away from the div\/ image \/ any element. The modified source code is shown in the example below.<\/p>\n<h3>Example 2: Alert Div Title onRollover \/ upon Hover and Alert custom message on Rollout \/ Hover away using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery On Rollover Show Title of Div, Image, etc.title&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n\n&lt;style type=\"text\/css\"&gt;\n#my_div {\nborder: 1px solid #060;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;div id=\"my_div\" title=\"My DIV title\"&gt;This is my existing div.&lt;\/div&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#my_div').hover(function() {\n\nvar title = $(this).attr('title');\n\nalert( 'Div Title is: '+ title );\n\n}, function() {\n\n\/\/ Trigger this alert when the mouse pointer leaves the Div \/ Image \/ Element\n\nalert('Hovered away from this div.');\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>When you run the above code, you will notice that you receive 2 alerts. One when you rollover the div &amp; the other when you rollout. So in this way, you can show the title of the element or attach a custom functionality.<\/p>\n<h3>Example 3: Alert Title onRollover \/ upon Hover of an image using jQuery<\/h3>\n<p>Let&#8217;s assume that there is an image on the page. Then, we can show \/alert the title of that image upon hover \/ rollover. Here is the complete source code (HTML + jQuery):<\/p>\n<pre class=\"lang:xhtml decode:true crayon-selected\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Show Div, Image, etc.title on Hover&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n\n&lt;style type=\"text\/css\"&gt;\n#my_div {\nborder: 1px solid #060;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;img src=\"images\/banner.png\" width=\"2000\" height=\"290\" title=\"Image Title\"&gt;\n\n&lt;script type=\"text\/javascript\"&gt;&lt;\/pre&gt;\n$('img').hover(function() {\n\nvar title = $(this).attr('title');\n\nalert( 'Image Title is: '+ title );\n\n});\n&lt;pre&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Simply run the above code, hover upon the image and it&#8217;s title will be shown.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1173\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p><strong>Simple, isn&#8217;t it?<\/strong><\/p>\n<p>Do you know of any other ways to use\u00a0<em><strong>jQuery to Show Title On Rollover for a\u00a0Div, Image, any element<\/strong><\/em>? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have been wanting to show title of an image or a div or any other element on hover or when you rollover that element, then you are reading the right article. In this article, I am going to share an easy way to show \/ alert title on rollover \/ hover of any [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,42,41],"class_list":["post-1173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-iV","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1173"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1173\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}