jQuery On Rollover Show Title (Div Title, Image Title, etc.)
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 element that you choose and also attach custom functionality that will trigger automatically, when you hover away from the div / image / other element. Read on to find out more.
Examples to Show Div, Image, etc.title on Hover using jQuery
For this example, I am assuming that I have a Div with ID “my_div” and it’s title is “My DIV title”. Now I want to show the Div’s title when I rollover the mouse over this div.
Example 1: Alert Div Title onRollover / upon Hover using jQuery
Here is the complete source code (HTML + jQuery):
<html>
<head>
<title>jQuery On Rollover Show Title of Div, Image, etc.</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
#my_div {
border: 1px solid #060;
}
</style>
</head>
<body>
<div id="my_div" title="My DIV title">This is my existing div.</div>
<script type="text/javascript">
$('#my_div').hover(function() {
var title = $(this).attr('title');
alert( 'Div Title is: '+ title );
});
</script>
</body>
</html>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.
Example 2: Alert Div Title onRollover / upon Hover and Alert custom message on Rollout / Hover away using jQuery
<html>
<head>
<title>jQuery On Rollover Show Title of Div, Image, etc.title</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
<style type="text/css">
#my_div {
border: 1px solid #060;
}
</style>
</head>
<body>
<div id="my_div" title="My DIV title">This is my existing div.</div>
<script type="text/javascript">
$('#my_div').hover(function() {
var title = $(this).attr('title');
alert( 'Div Title is: '+ title );
}, function() {
// Trigger this alert when the mouse pointer leaves the Div / Image / Element
alert('Hovered away from this div.');
});
</script>
</body>
</html>When you run the above code, you will notice that you receive 2 alerts. One when you rollover the div & the other when you rollout. So in this way, you can show the title of the element or attach a custom functionality.
Example 3: Alert Title onRollover / upon Hover of an image using jQuery
Let’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):
<html>
<head>
<title>Show Div, Image, etc.title on Hover</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
<style type="text/css">
#my_div {
border: 1px solid #060;
}
</style>
</head>
<body>
<img src="images/banner.png" width="2000" height="290" title="Image Title">
<script type="text/javascript"></pre>
$('img').hover(function() {
var title = $(this).attr('title');
alert( 'Image Title is: '+ title );
});
<pre></script>
</body>
</html>Simply run the above code, hover upon the image and it’s title will be shown.
Simple, isn’t it?
Do you know of any other ways to use jQuery to Show Title On Rollover for a Div, Image, any element? Feel free to share by commenting below.