Display image tooltip using bootstrap popover

by Posted on

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.

pop
So Create a sample product summary page, don’t forget to include bootstrap libraries.

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Bootstrap popover example </h2>        
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>PID</th>
        <th>Image</th>
        <th>Product Name</th>
        <th width="50%">Product Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td><img class="imgzm" src="img/1.jpg" title="" height="130" width="100"></td>
        <td>Product - 1</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      </tr>
      <tr>
      <td>002</td>
        <td><img class="imgzm" src="img/2.jpg" title="" height="130" width="100"></td>
        <td>Product - 2</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      </tr>
      <tr>
        <td>J003</td>
        <td><img class="imgzm" src="img/3.jpg" title="" height="130" width="100"</td>
        <td>Product - 3</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      </tr>
    </tbody>
  </table>
</div>

After that add popover feature on your product summary page.

<script>             
$(function() {
 $('.imgzm').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '<img src="'+$(this).attr('src') + '" width="500" height="500" />';
  }
 });
})
</script>

Now your final product summary page with image tooltip will be..

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Product Summary</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<style>
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
</style>
<body>
 
<div class="container">
  <h2>Bootstrap popover example </h2>        
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>PID</th>
        <th>Image</th>
        <th>Product Name</th>
        <th width="50%">Product Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td><img class="imgzm" src="img/1.jpg" title="" height="130" width="100"></td>
        <td>Product - 1</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      </tr>
      <tr>
      <td>002</td>
        <td><img class="imgzm" src="img/2.jpg" title="" height="130" width="100"></td>
        <td>Product - 2</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      </tr>
      <tr>
        <td>J003</td>
        <td><img class="imgzm" src="img/3.jpg" title="" height="130" width="100"</td>
        <td>Product - 3</td>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      </tr>
    </tbody>
  </table>
</div>
<script>             
$(function() {
 $('.imgzm').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '<img src="'+$(this).attr('src') + '" width="500" height="500" />';
  }
 });
})
</script>
</body>
</html>

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

If you like this post please don’t forget to subscribe my public note book for more useful stuff

Published by admin