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!