Show tooltip on images using jQuery
Tooltip is a very nice feature and it is used for input controls but it would be a nice feature to show tooltip on images/photos to describe the picture and it would make picture more interactive. For example, there is a photo of hotel and you want to show tooltip on various parts of hotel to describe the hotel like rooms, swimming pool, gym etc.
iPicture is a jQuery plugin which allows you to place tooltips on picture. iPicture is a jQuery Plugin to create interactive pictures with extra descriptions. This plugin is easy to configure, easy to customize and easy to integrate.
iPicture needs few configuration to make your pictures interactive. First step consists in writing html code containing the pictures. iPicture supports both lists and divs to display the images. This choice makes iPicture compatible with most of the slideshow plugin.
//Code Starts
<div id="iPicture">
<div id="picture1" style="background: url('images/image1.jpg')"></div>
<div id="picture2" style="background: url('images/image2.jpg')"></div>
<div id="picture3" style="background: url('images/image3.jpg')"></div>
<div id="picture4" style="background: url('images/image4.jpg')"></div>
</div>
//Code Ends
And jQuery code,
//Code Starts
$(document).ready(function(){
$( "#iPicture" ).iPicture({
pictures: ["picture1","picture2","picture3","picture4"],
moreInfos:{
"picture1":[
{"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
{"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"}],
}
"picture2":[
{"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
{"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}],
}
});
});
//Code Ends
You can check various demo of iPicture plugin created by the author.
Official website.
Feel free to contact me for any help related to jQuery, I will gladly help you.
