Tooltip using Jquery for Images

I would like to share this tutorial that will help you to Show tooltip using alt attribute value of image.

Folder and Files Strucure you need to create

ProjectFolder

------>images
|_________all Images
------>js
|_________all js files(store jquery library and create custom.js file in js folder)
------>index.html
------>style.css

Step 1.

In index.html file At header section link the style.css

<link href="style.css" rel="stylesheet" type="text/css">

Link Jquery libraries in header section after the CSS file linked

<script type="text/javascript" charset="utf-8" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/custom.js"></script>

Note:- 1.I have used Jquery 2.0.3 version file. You can use any Jquery Liberary
2. custom.js file contains custom jquery code to create tooltip for image using alt value of image.

Step 2.

Inside your body tag of index.html
Add fowllowing html code

<ul>
<li><img alt="TITLE 1" src="images/art1.jpg"></li>
<li><img alt="TITLE 2" src="images/art2.jpg"></li>
<li><img alt="TITLE 3" src="images/art3.jpg"></li>
<li><img alt="TITLE 4" src="images/art4.jpg"></li>
<li><img alt="TITLE 5" src="images/art5.jpg"></li>
<li><img alt="TITLE 6" src="images/art6.jpg"></li>
</ul>

Step 3.

Inside style.css file add follwoing css code

img{width:160px;height:160px;padding:10px;}
ul{list-style:none;}
ul li{position:relative;display:block;float:left;margin-top:50px;}

/* Tooltips */
.tooltip {
/* Color and text alignment */
text-align:center;
background:gray;
color:#fff;
bottom:100%;
padding: 10px;
/* Positioning */
display:block;
position:absolute;
width:100px;
left:-30px;
margin-bottom:15px;
/* Make it invisible by default */
filter:alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity:0;
visibility:hidden;
/* Animations */
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip:before {
bottom:-20px;
content:" ";
display:block;
height:20px;
left:0;
position:absolute;
width:100%;
}
/* CSS Triangle */
.tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
/* the color below  must match the color of the
background of your tooltip */
border-top: solid gray 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
/* Tooltip visible */
li:hover .tooltip{
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}

Step 4:

Inside custom.js file add following Jquery code

$(document).ready(function(){
$('img').each(function(){

var title = $(this).attr('alt');
$(this).before('<div>'+ title +'</div>');
});

});

Step 5: Save all files and Open index.html file.