Show tooltip on images using jQuery
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.