Display image tooltip using bootstrap popover
Here you’ll learn how you can display image tooltip on mouse over using boostrap popover function.
Suppose you have a product list with images and in product summary page you have displayed one small image with each product and you want to display big size image when ever user over mouse pointer on small image.
So Create a sample product summary page, don’t forget to include bootstrap libraries.
Bootstrap popover example
PID
Image
Product Name
Product Description
001
Product - 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
002
Product - 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
J003
Product - 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
After that add popover feature on your product summary page.
Now your final product summary page with image tooltip will be..
index.html
Product Summary
Bootstrap popover example
PID
Image
Product Name
Product Description
001
Product - 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
002
Product - 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
J003
Product - 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
So with this feature user can easily see the large size of image on mouse over event.
See working demo and you can also download source code by clicking on download button.
| DEMO | DOWNLOAD |
