A tooltip is used to display quick information about the element and it is easy to add to the element using Bootstrap.
You can specify your text or HTML content using the title option.
Within the tooltip, you can show content dynamically using jQuery AJAX. For this require defining an Anonymous function to handle AJAX request and get the content.
Contents
1. Table structure
Create users table and add some records.
CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `name` varchar(80) NOT NULL, `gender` varchar(10) NOT NULL, `email` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Configuration
Create a config.php for database connection.
Completed Code
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
3. HTML & PHP
Include Bootstrap CSS and JS files with the jQuery library in <head> section.
Select records from users table and display the user name in <div> container. Added <span class='tooltipEl'> for displaying the Bootstrap tooltip and $id value to define id attribute.
Completed Code
<?php
include "config.php";
?>
<!doctype html>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='container'>
<?php
$userFetch = mysqli_query($con,"SELECT * FROM users");
while($row = mysqli_fetch_assoc($userFetch)){
$id = $row['id'];
$name = $row['name'];
?>
<div class='content'>
<span class='tooltipEl' id='user_<?= $id ?>'><?= $name ?></span>
</div>
<?php
}
?>
</div>
</body>
</html>
4. CSS
Create a style.css file.
Completed Code
.container{
margin-top: 20px;
}
.content{
border: 1px solid black;
padding: 5px;
margin-bottom: 5px;
}
.content span:hover{
cursor: pointer;
}
.tooltip-inner{
text-align: left;
max-width: 350px;
}
5. PHP
Create ajaxfile.php file.
Select records from the users table according to the POST user id and return an HTML string that contains user information.
Completed Code
<?php
include "config.php";
$userid = $_POST['userid'];
$select_query = "SELECT * FROM users WHERE id=".$userid;
$result = mysqli_query($con,$select_query);
$html = '<div>';
while($row = mysqli_fetch_array($result)){
$username = $row['username'];
$name = $row['name'];
$gender = $row['gender'];
$email = $row['email'];
$html .= "<span class='head'>Name : </span><span>".$name."</span><br/>";
$html .= "<span class='head'>Username : </span><span>".$username."</span><br/>";
$html .= "<span class='head'>Gender : </span><span>".$gender."</span><br/>";
$html .= "<span class='head'>Email : </span><span>".$email."</span><br/>";
}
$html .= '</div>';
echo $html;
6. jQuery
Initialize Bootstrap tooltip on class='tooltipEl' by calling tooltip() method and define some options.
On title option pass userDetails function instead of static text.
When the userDetails function gets called then split the id to get the userid and send an AJAX request. On successful callback returns the response.
Completed Code
$(document).ready(function(){
// Add tooltip
$('.tooltipEl').tooltip({
delay: 500,
placement: "bottom",
title: userDetails,
html: true
});
});
// Get user details for tooltip
function userDetails(){
var id = this.id;
var split_id = id.split('_');
var userid = split_id[1];
var tooltipText = "";
$.ajax({
url: 'ajaxfile.php',
type: 'post',
async: false,
data: {userid:userid},
success: function(response){
tooltipText = response;
}
});
return tooltipText;
}
7. Demo
8. Conclusion
Use title option in tooltip() method to dynamically load content by jQuery AJAX. Define an Anonymous function to get tooltip text and handle AJAX request.
