September 13, 2024
Hot News

Display image tooltip using bootstrap popover

admin09 mins
pop

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>PIDth>
        <th>Imageth>
        <th>Product Nameth>
        <th width="50%">Product Descriptionth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>001td>
        <td><img class="imgzm" src="img/1.jpg" title="" height="130" width="100">td>
        <td>Product - 1td>
        <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>002td>
        <td><img class="imgzm" src="img/2.jpg" title="" height="130" width="100">td>
        <td>Product - 2td>
        <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>J003td>
        <td><img class="imgzm" src="img/3.jpg" title="" height="130" width="100"td>
        <td>Product - 3td>
        <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>

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.

<script>             
$(function() {
 $('.imgzm').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '+$(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 Summarytitle>
  <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>PIDth>
        <th>Imageth>
        <th>Product Nameth>
        <th width="50%">Product Descriptionth>
      tr>
    thead>
    <tbody>
      <tr>
        <td>001td>
        <td><img class="imgzm" src="img/1.jpg" title="" height="130" width="100">td>
        <td>Product - 1td>
        <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>002td>
        <td><img class="imgzm" src="img/2.jpg" title="" height="130" width="100">td>
        <td>Product - 2td>
        <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>J003td>
        <td><img class="imgzm" src="img/3.jpg" title="" height="130" width="100"td>
        <td>Product - 3td>
        <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 '+$(this).attr('src') + '" width="500" height="500" />';
  }
 });
})
script>
body>
html>

Product Summary

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News

Top