Dynamically load content on Bootstrap Tooltip with AJAX

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.

Dynamically load content on Bootstrap Tooltip with AJAX


Contents

  1. Table structure
  2. Configuration
  3. HTML & PHP
  4. CSS
  5. PHP
  6. jQuery
  7. Demo
  8. Conclusion

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

View 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.

If you found this tutorial helpful then don't forget to share.