Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

A Popover is similar to tool-tips as it hovers over its parent window but contain much more content. It is very user friendly and unlike tool-tips, popovers can be used to display more information on same page without page refresh. If you're developing a website and have user list and wants to display each user details when click or hover, then you can implement dynamic popovers or can create your own custom hovercard to display users details on same page. In this tutorial you will learn how to create dynamic Bootstrap popover or hovercard using Ajax, PHP and MySQL. The tutorial explained in easy steps with live demo and link to download live source code.



So let’s start the coding. We will have following file structure for the example to to create dynamic Bootstrap popover or hovercard using Ajax, PHP and MySQL.

• index.php


• load_data.php


• ajax_data.js

Steps1: Create Database Table

As in this example, we will display popover or hovercard when hover over username. So first we will create MySQL database tables developers and insert few records into tables and then display it.

we will create developers table using below query.

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`designation` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


We will use below query to insert records into table.

INSERT INTO `developers` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, ' \r\nGarrett Winters', 'Newyork', 'Male', 'Software Engineer', 34, 'image_1.jpg'),
(2, ' \r\nSonya Frost', 'London', 'Female', 'Web Developer', 28, 'image_2.jpg'),
(3, 'Laeeq Khan', 'Delhi, India', 'Male', 'Web Developer', 30, 'image_3.jpg');




Steps2: Display List of Users
In index.php, we will create HTML for display users list. We will get users record from MySQL database with PHP and display these. We have used class hover and userid with user link to display popover on mouseover.
<div class="container">
<h2>Example: Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL</h2>
<div class="row">
<div class="col-md-6 well">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="20%">Employee ID</th>
<th width="40%">Employee Name</th>
</tr>
<?php
$sql = "SELECT id, name, address, gender, designation, age, image FROM developers LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $emp = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td>0000<?php echo $emp["id"]; ?></td>
<td><a href="#" class="hover" id="<?php echo $emp["id"]; ?>"><?php echo $emp["name"]; ?></a></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</div>



We will create popover HTML in a DIV to use with user JSON data in ajax_data.js to create dynamic popover.

<div id="popover_html" style="display:none;">
<p><img src="images/p_image" class="img-responsive img-thumbnail" /></p>
<p><label>Name :</label>p_name</p>
<p><label>Address : </label>p_address</p>
<p><label>Gender : </label>p_gender</p>
<p><label>Designation : </label>p_design</p>
<p><label>Age : </label>p_age</p>
</div>




Steps3: Implement Popover With Content

Now in ajax_data.js, we will call popover() function to create popover when mouseover on class hover. We will use popover property trigger: 'hover' to display popover on mouseover. We will also use popover property title: popoverContent to load dynamic content in popover by calling function popoverContent().

jQuery(document).ready(function(){
jQuery('.hover').popover({
title: popoverContent,
html: true,
placement: 'right',
trigger: 'hover'
});


we also create function popoverContent() to make ajax request to load_data.php to get user details from MySQL database table and get user details in JSON format and create popover HTML using user JSON data.

function popoverContent() {
var content = '';
var element = $(this);
var id = element.attr("id");
$.ajax({
url: "load_data.php",
method: "POST",
async: false,
data:{
id : id
},
dataType: "JSON",
success:function(data){
content = $("#popover_html").html();
content = content.replace(/p_image/g, data.image);
content = content.replace(/p_name/g, data.name);
content = content.replace(/p_address/g, data.address);
content = content.replace(/p_gender/g, data.gender);
content = content.replace(/p_design/g, data.designation);
content = content.replace(/p_age/g, data.age);
}
});
return content;
}




Steps4: Load Popover Data from MySQL with PHP
Now finally in load_data.php, we will get user details from MySQL database table with PHP and return as JSON.
<?php
include_once("db_connect.php");
if(isset($_POST["id"])) {
$sql = "SELECT id, name, address, gender, designation, age, image FROM developers WHERE id='".$_POST["id"]."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$dev_data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$dev_data = $rows;
}
echo json_encode($dev_data);
}
?>



You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]