Facebook Style Profile Info Tooltip using jQuery & CSS

I have got lots of emails from my readers asked that how to design a facebook style profile tooltip with cover page,profile picture, name, headline, add as friend & send message button..

Here I had explained a very basic version of facebook profile tooltip with all features they have asked.

You can use this script in your web & social networking projects with little customization.

I hope you all like this.. thanks

CSS Code

body {
margin:0;
padding:0;
background: #e8ebed;
}
.container { margin:0 auto; width:50%; background:#fff; padding:20px; }
#profile-tip {
background: #fff;
border: 1px solid #BFBFBF;
width: 300px;
margin: 0 auto;
border-radius: 3px;
position: absolute;
display: none;
padding: 0 0 10px 0;
}
.profile-tip-padding {
padding: 20px 10px 10px 10px;
}
.profile-tip-cover img {
width: 100%;
height:100px;
}
.profile-tip-avatar {
text-align: left;
margin-top: -45px;
cursor:pointer;
margin-left:10px;
}
.profile-tip-avatar img {
width: 75px;
height: 75px;
padding:1px; border:1px solid #ccc;
background:#ccc;
cursor:pointer;
}
.profile-tip-info {
text-align: center;
}
.profile-tip-info .cover-username {
float: none;
margin-top: -55px;
margin-left:-20px;
font-size:16px;
font-weight:bold;
}
.profile-tip-info .cover-headline {
float: none;
margin-top: 10px;
margin-left:30px;
font-size:14px;
color:#333;
}
.profile-tip-info  a { color:#fff; text-decoration:none; }
.profile-tip-buttons {
padding: 0 10px 0 10px;
overflow: auto;
}
.profile-tip-buttons-container {
width: 60px;
margin: 0 auto;
}
.profile-tip-divider {
width: 280px;
height: 1px;
background: #dee0e3;
margin: 10px auto;
}
.profile-tip-bio {
padding: 0 10px;
color: #AAA;
text-align: right;
}

.msg_body
{
min-height:70px;
margin-bottom:10px;
border-bottom:solid 1px #fafafa;
}
.msg_img img
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:5px;
cursor:pointer;
}
.msg_text
{
margin-left:70px;
min-height:50px;
word-wrap:break-word;
overflow:hidden;
padding:5px;
display:block;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
.time { font-size:12px; font-style:italic; color:#999; }
.loader { background: url('loader.gif'); }

jQuery Code

function FacebookprofileTip(post, delay) {

	if(delay == 1) {
		clearInterval(TipTimer);
	} else {
		TipTimer = setInterval(function(){

			var msgType = 'message';
			// The position to be increased
			var height = 58;
			var left = 20;

		// Start displaying the profile card with the preloader
		$('#profile-tip').show();
		$('#profile-tip').html('<div class="profile-tip-padding"><div class="loader"></div></div>');

		// Get the position of the parent element
		var position = $("#"+msgType+post).position();
		// Store the position into an array
		var pos = {
			top: (position.top + height) + 'px',
			left: (position.left + left) + 'px'
		};

		// Set the position of the profile card
		$('#profile-tip').css(pos);
		$.ajax({
			type: "POST",
			url: "fetch_profile.php",
			cache: false,
			success: function(html) {
				$('#profile-tip').html(html);
			}
		});
		clearInterval(TipTimer);
		}, 500);
	}
}
$(document).ready(function() {
$('#profile-tip').mouseleave(function() {
		$('#profile-tip').hide();
	});
});

HTML Code

<div class="msg_body" id="message1">
<div class="msg_img">
<img onmouseover="FacebookprofileTip(1, 0)" onmouseout="FacebookprofileTip(0, 1);" onclick="FacebookprofileTip(0, 1);" src="http://0.gravatar.com/avatar/82620dd66b22b34a915303b93b92929b" />
</div>
<div class="msg_text">
w3lessons.info Programming Blog <a href="http://www.w3lessons.info">http://w3lessons.info</a>
<div class="time">5 seconds ago</div>
</div>
</div>
<div id="profile-tip"></div>

Div  id=”message1”  - where message1 – 1 stands for message id for unique tooltip creations

fetch_profile.php

<div class="profile-tip-cover"><img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/311522_4373718103997_1253579792_n.jpg">
</div>
<div class="profile-tip-avatar"> <a href="http://www.facebook.com/itzurkarthi" target="_blank"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c0.45.180.180/s160x160/581450_4755153199636_1162983977_a.jpg" /></a> </div>
<div class="profile-tip-info"> <a href="http://www.facebook.com/itzurkarthi">
  <div class="cover-username">Karthikeyan K</div>
  <div class="cover-headline">Founder @ w3lessons.info</div>
  </a> </div>
<div class="profile-tip-divider"></div>
<div class="profile-tip-bio"><a class="uibutton confirm" href="http://www.facebook.com/itzurkarthi" target="_blank">Add as Friend</a> <a class="uibutton" href="http://www.facebook.com/itzurkarthi" target="_blank">Send Message</a></div>

You can pass the user id to fetch_profile.php to show different content with mysql as backend using jQuery Ajax.

View Live Demo & Download

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!