Dynamically show data in jQuery UI Tooltip using AJAX

In the constantly evolving world of web development, creating an immersive and engaging user experience is crucial. One way to achieve this is by utilizing tooltips – a powerful tool that provides additional context and information when users interact with specific elements on a website.

By combining jQuery UI Tooltip with PHP, you can create dynamic tooltips that seamlessly fetch and display data in real-time.

In this article, readers will embark on a journey to explore the fusion of these technologies, discovering how interactive tooltips can captivate and inform users while showcasing data in creative ways. So why wait? Let’s dive into the exciting world of dynamically showcasing data in jQuery UI using PHP!

Demo Download

Table structure
Database Configuration
HTML – Create Layout
jQuery – Initialize tooltip and load data
PHP – Return Tooltip data
CSS
Demo
Conclusion

1. Table structure

I am using users table in the example.

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(60) NOT NULL
);

2. Database Configuration

Create a config.php for the database connection.

<?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 – Create Layout

Create <span> element with the user’s name in the <div class='content'> container. In the <span> specify title (use to enable tooltip from the library on the element) and id attribute.

Store userid in data-id attribute.

You can define any default value in the title attribute.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src='script.js' type='text/javascript'></script>
  
<div class='container'>
 
   <div class='content'>
        <span title='Please wait..' data-id='1' id='user_1'>Yogesh Singh</span>
   </div>
 
   <div class='content'>
        <span title='Please wait..' data-id='2' id='user_2'>Sonarika Bhadoria</span>
   </div>

   <div class='content'>
        <span title='Please wait..' data-id='3' id='user_3'>Vishal Sahu</span>
   </div>

   <div class='content'>
        <span title='Please wait..' data-id='4' id='user_4'>Sunil</span>
   </div>
</div>

4. jQuery – Initialize tooltip and load data

Create script.js file.

Initialize tooltip on the <span> element by calling tooltip() method on the selector.

In the tooltip() method define two options track and open.

track – Enable to change the position of tooltip according to the mouse movement when it set to true.
open – Get the user id from data-id attribute and assign to the userid variable. Send the AJAX request and pass the userid as data. On successful callback update the content option with the response.

NOTE – Sometime while setting tooltip content dynamically it get freez when moving mouse fastly over element. For this I defined mouseout event on <span> which reintialize the tooltip.

$(document).ready(function(){

    // initialize tooltip
    $( ".content span" ).tooltip({
         track:true,
         open: function( event, ui ) {
              var id = this.id;
              var userid = $(this).attr('data-id');
 
              $.ajax({
                  url:'fetch_details.php',
                  type:'post',
                  data:{userid:userid},
                  success: function(response){
 
                       // Setting content option
                       $("#"+id).tooltip('option','content',response);
 
                  }
              });
         }
    });

    $(".content span").mouseout(function(){
         // re-initializing tooltip
         $(this).attr('title','Please wait...');
         $(this).tooltip();
         $('.ui-tooltip').hide();
    });

});

5. PHP – Return Tooltip data

Create fetch_details.php file.

Assign POST userid value to a variable. Execute a SELECT query on users table where id matches with $userid. Loop on the fetched data and create a HTML layout that has user details.

Return $html variable.

<?php

include "config.php";

$userid = 0;
if(isset($_POST['userid'])){
    $userid = mysqli_real_escape_string($con,$_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. CSS

.container{
   margin: 0 auto;
   width: 30%;
}

.content{
   border: 1px solid black;
   padding: 5px;
   margin-bottom: 5px;
}
.content span{
   width: 250px;
}
.content span:hover{
   cursor: pointer;
}

7. Demo

View Demo

8. Conclusion

One useful technique to increase user interaction and present personalized information in an visually attractive way is to introduce dynamic tooltips into your web applications through jQuery UI and PHP. With the strength of PHP, acquiring content from different sources on-the-go and creating interesting tooltip content becomes possible. Furthermore, the flexibility of jQuery UI Tooltip lets you adapt the look, actions, and placement of tooltips as per your application’s requirements.

This article outlines a step-by-step implementation to harness the potential of PHP and jQuery UI Tooltip for creating interactive tooltips that offer real-time data to users. It is important to prioritize security measures by validating user inputs and cleaning data for ensuring an application that is secure.

Implementing dynamically displayed tooltips can significantly enhance users’ web browsing experience, increase usability and provide them with relevant information easily. Why not leverage PHP and jQuery UI Tooltip to take your web development projects to new heights? Dazzle your audience by engaging them with informative and captivating tooltips.

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

Dynamically show data in jQuery UI Tooltip using PHP

Contents