Facebook like Profile Tooltip with jQuery, Ajax, Php & Mysql

In this post i am going to tell u guz how to create a facebook like profile tooltip with jQuery php & mysql. Probably this will be my last post till 26 march 2014 because currently my paper are going on and i get very less time for my girlfriend (computer) so we will meet after 26 march 2014 byeeeeeee

facebook like profile tooltip with jQuery and php

Live Demo Download

Database

first we are creating a database with general info id, fullname, headline, avatar, cover

CREATE TABLE IF NOT EXISTS `fb_profile_tooltip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fullname` varchar(255) NOT NULL,
  `headline` varchar(255) NOT NULL,
  `avatar` text NOT NULL,
  `cover` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

html

Html is having nothing special we just have html5 data-id (anchor tag) with store the user id and that id will be fetched by jQuery and send to php to create a dynamic profile tooltip & a div with a class p-tooltip

 <div class="p-tooltip"></div>
 <table cellpadding="20">
  <td><a href="#" class="profile" data-id="1">user1</a></td>
  <tr>
  <td><a href="#" class="profile" data-id="2">user2</a></td>
  <tr>
  <td><a href="#" class="profile" data-id="3">user3</a></td>
  <tr>
  <td><a href="#" class="profile" data-id="4">user4</a></td>
 </table>

css

body{
font-family: verdana;
}
a{
text-decoration: none;
}
.p-tooltip{
background: #fafbfb;
border: 1px solid #BFBFBF;
width: 320px;
margin: 0 auto;
border-radius: 5px;
position: absolute;
display: none;
padding: 0 0 10px 0;
}
.p-tooltip-cover img{
width: 100%;
height: 120px;
}
.p-tooltip-avatar{
text-align: left;
margin-top: -45px;
margin-left: 10px;
}
.p-tooltip-avatar img{
height: 75px;
width: 75px;
padding: 4px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.p-tooltip-info{
text-align: left;
}
.p-tooltip-info .p-username{
float: none;
margin-top: -70px;
margin-left: 100px;
font-size: 14px;
font-weight: bold;
color: white;
}
.p-tooltip-info .p-headline{
float: none;
margin-top: 6px;
margin-left: 100px;
font-size: 12px;
color: black;
}
.p-tooltip-button{
float: right;
margin-top: 5px;
}
.p-tooltip-button button{
cursor: pointer;
}

jQuery
we have created two function 1> showProfileTooltip(); 2> hideProfileTooltip(); when user mouseover a link we use the showProfileTooltip(); this function get the data from a get_profile.php and feed the data in the p-tooltip div and when the mouseleave we use hideProfileTooltip();

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  function showProfileTooltip(e, id){
   var top = e.clientY + 20;
   var left = e.clientX - 10;

   $('.p-tooltip').css({
    'top':top,
    'left':left
   }).show();
   //send id & get info from get_profile.php
   $.ajax({
    url: 'get_profile.php?id='+id,
    beforeSend: function(){
     $('.p-tooltip').html('Loading..');
    },
    success: function(html){
     $('.p-tooltip').html(html);
    }
   });
  }

  function hideProfileTooltip(){
   $('.p-tooltip').hide();
  }

  $('.profile').mouseover(function(e){
   var id = $(this).attr('data-id');
   showProfileTooltip(e, id);
  });

  $('.p-tooltip').mouseleave(function(){
   hideProfileTooltip();
  });
 });
 </script>

get_profile.php

in this page we are getting the user id and generating the content based on its uniquer id fetched from the html5 data-id anchor tag

<?php
 //include '../connect.php';
 ///connect to mysql 
 mysql_connect('localhost','root', '');
 mysql_select_db('hunklessons');
 //get the user id
 if(isset($_GET['id']) && !empty($_GET['id'])){
  $id = mysql_real_escape_string($_GET['id']);
  //get info of user based on user id
  $q = mysql_query("SELECT * FROM fb_profile_tooltip WHERE id='$id'");
  if(mysql_num_rows($q) == 1){
   $row = mysql_fetch_assoc($q);
   //output the html
   ?>
  <div class="p-tooltip-cover">
   <img src="<?php echo $row['cover'];?>">
  </div>
  <div class="p-tooltip-avatar">
   <img src="<?php echo $row['avatar'];?>" />
  </div>
  <div class="p-tooltip-info">
   <a target="_blank" href="http://hunklessons.blogspot.in/" style="text-decoration:none;">
    <div class="p-username"><?php echo $row['fullname'] ?></div>
    <div class="p-headline"><?php echo $row['headline'] ?></div>
   </a>
  </div>
  <div class="p-tooltip-button">
   <a target="_blank" href="http://hunklessons.blogspot.in/">
    <button>Add as friend</button><button>message</button>
   </a>
  </div>
   <?php
  }else{
   echo "Error";
  }
 }
?>