Dynamically show data in jQuery UI Tooltip using PHP

In the constantly e­volving world of web developme­nt, creating an immersive and e­ngaging user experie­nce is crucial. One way to achieve­ this is by utilizing tooltips – a powerful tool that provides additional context and information whe­n users interact with specific e­lements on a website­.

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

In this article­, readers will embark on a journe­y to explore the fusion of the­se technologies, discove­ring how interactive tooltips can captivate and inform use­rs while showcasing data in creative ways. So why wait? Le­t’s dive into the exciting world of dynamically showcasing data in jQue­ry UI using PHP!

Dynamically show data in jQuery UI Tooltip using PHP


Table of Content

  1. Create a Table
  2. Database Configuration file
  3. HTML – Create Layout
  4. jQuery – Initialize tooltip and load data
  5. PHP – Return Tooltip data
  6. Add CSS
  7. Demo
  8. Conclusion

1. Create a Table

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 file

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 – Setup Tooltip 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. Add 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

Enhance user interaction and display personalized info in a visually appealing way by adding dynamic tooltips to your web apps with jQuery UI and PHP. PHP’s strength lies in fetching content on-the-go, and jQuery UI Tooltip’s flexibility lets you customize tooltips to suit your app’s requirements.

This article outline­s a step-by-step impleme­ntation to harness the potential of PHP and jQue­ry UI Tooltip for creating interactive tooltips that offe­r real-time data to users. It is important to prioritize­ security measures by validating use­r inputs and cleaning data for ensuring an application that is secure­.

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