chethann/simple hovercard

## simple hovercard
<html>
    <head>
        <title>Simple hovercard</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

        <script>
            $(function(){
                $('#hoverbox').mouseleave(function(){
                    $('#hoverbox').hide();
                });

                $(".trigger").mouseenter(function(e){
                    //you can get picture addresses and the user_name from the database by making an ajax call at this point.
                    //You can either store used id or the full link in an attribute in the hyperlink or photo.

                    var cover_pic = "http://www.framablog.org/public/_img/others/github-logo.png";
                    var  profile_pic = "https://avatars1.githubusercontent.com/u/2727154?v=2&s=460";
                    var  user_name = "Chethan";
                    var display_content =  '<img src= "' + cover_pic + '" id="cover"/><img src= "' + profile_pic + '" id="profile"/><div id="hoverbox_name">' + user_name + '</div><div id = "hoverbox_bottom"><div style="position: absolute; right: 5%; top:20%; "><a id="fbstyle_button" href="#button">Add Friend</a><a id="fbstyle_button" href="#button">Message</a></div></div>';

                    var pos = {
                        top: (e.clientY ) + 'px',
                        left: (e.clientX ) + 'px'
                    };
                    $('#hoverbox').css(pos).html(display_content).show(400);
                }).mouseleave(function(e) {
             if ($(e.relatedTarget).attr('id') != "hoverbox") {
                $('#hoverbox').hide();
            };
            });
            });
        </script>

        <style>
            body {
            font-size: small;
            }


            #hoverbox {
                background-color: white;
                border: solid 1px #BCBCBC;
                box-shadow: 0 4px 16px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
                color: #666;
                font-size: 13px;
                width: 350px;
                height: 230px;
                overflow: hidden;
                position: absolute;
                word-wrap: break-word;
                z-index: 1202;
                display: none;
                margin-top: -10px;
            }

            #hoverbox img#cover {
                width: 100%;
                height: 62%;
                float: left;
            }

            #hoverbox img#profile {
                width: 90px;
                height: 90px;
                position:absolute;
                bottom:20%;
                left:3%;
                z-index: 1234;
                background-color: #FFFFFF;
                border: 3px solid #FFFFFF;
                border-radius:1px;
            }

            #hoverbox_name{
                font-size: 17px;
                position: absolute;
                top:50%;
                left: 35%;
                color:#FFFFFF;
            }

            #hoverbox_bottom{
                width:100%;
                height:18%;
                position:absolute;
                bottom:0px;
                background-color: #eee;
            }

            #fbstyle_button{
                -moz-border-bottom-colors: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                background-color: #EEEEEE;
                background-image: linear-gradient(#F5F6F6, #E4E4E3);
                border-color: #999999 #999999 #888888;
                border-image: none;
                border-style: solid;
                border-width: 1px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;
                color: #333333;
                cursor: pointer;
                display: inline-block;
                font: bold 11px 'lucida grande',tahoma,verdana,arial,sans-serif;
                margin: 0;
                overflow: visible;
                padding: 0.3em 0.6em 0.375em;
                position: relative;
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
            }

            a{
                font-size: 18px;
                margin-top:10px;
                margin-bottom:10px;
                text-decoration: none;
                color:#444;
                padding: 5px;
            }
        </style>
    </head>
    <body>
    <div  style="text-align: center;">
        <h1>Hover over the name or photo to see hovercard.</h1>
        <img class="trigger" src="xyz.jpg" style="height:60px; width:60px;"/>
        <a class="trigger" href="#" style="position:relative; top:-45px;">Chethan</a>
    </div>
        <div id="hoverbox">

        </div>
        <div style="text-align: center; ">
            Created by Chethan.N
        </div>
    </body>
</html>
	<html>
	<head>
	<title>Simple hovercard</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"
	type="text/javascript"></script>

	<script>
	$(function(){
	$('#hoverbox').mouseleave(function(){
	$('#hoverbox').hide();
	});

	$(".trigger").mouseenter(function(e){
	//you can get picture addresses and the user_name from the database by making an ajax call at this point.
	//You can either store used id or the full link in an attribute in the hyperlink or photo.

	var cover_pic = "http://www.framablog.org/public/_img/others/github-logo.png";
	var profile_pic = "https://avatars1.githubusercontent.com/u/2727154?v=2&s=460";
	var user_name = "Chethan";
	var display_content = '<img src= "' + cover_pic + '" id="cover"/><img src= "' + profile_pic + '" id="profile"/><div id="hoverbox_name">' + user_name + '</div><div id = "hoverbox_bottom"><div style="position: absolute; right: 5%; top:20%; "><a id="fbstyle_button" href="#button">Add Friend</a><a id="fbstyle_button" href="#button">Message</a></div></div>';

	var pos = {
	top: (e.clientY ) + 'px',
	left: (e.clientX ) + 'px'
	};
	$('#hoverbox').css(pos).html(display_content).show(400);
	}).mouseleave(function(e) {
	if ($(e.relatedTarget).attr('id') != "hoverbox") {
	$('#hoverbox').hide();
	};
	});
	});
	</script>

	<style>
	body {
	font-size: small;
	}


	#hoverbox {
	background-color: white;
	border: solid 1px #BCBCBC;
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
	color: #666;
	font-size: 13px;
	width: 350px;
	height: 230px;
	overflow: hidden;
	position: absolute;
	word-wrap: break-word;
	z-index: 1202;
	display: none;
	margin-top: -10px;
	}

	#hoverbox img#cover {
	width: 100%;
	height: 62%;
	float: left;
	}

	#hoverbox img#profile {
	width: 90px;
	height: 90px;
	position:absolute;
	bottom:20%;
	left:3%;
	z-index: 1234;
	background-color: #FFFFFF;
	border: 3px solid #FFFFFF;
	border-radius:1px;
	}

	#hoverbox_name{
	font-size: 17px;
	position: absolute;
	top:50%;
	left: 35%;
	color:#FFFFFF;
	}

	#hoverbox_bottom{
	width:100%;
	height:18%;
	position:absolute;
	bottom:0px;
	background-color: #eee;
	}

	#fbstyle_button{
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #EEEEEE;
	background-image: linear-gradient(#F5F6F6, #E4E4E3);
	border-color: #999999 #999999 #888888;
	border-image: none;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;
	color: #333333;
	cursor: pointer;
	display: inline-block;
	font: bold 11px 'lucida grande',tahoma,verdana,arial,sans-serif;
	margin: 0;
	overflow: visible;
	padding: 0.3em 0.6em 0.375em;
	position: relative;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	}

	a{
	font-size: 18px;
	margin-top:10px;
	margin-bottom:10px;
	text-decoration: none;
	color:#444;
	padding: 5px;
	}
	</style>
	</head>
	<body>
	<div style="text-align: center;">
	<h1>Hover over the name or photo to see hovercard.</h1>
	<img class="trigger" src="xyz.jpg" style="height:60px; width:60px;"/>
	<a class="trigger" href="#" style="position:relative; top:-45px;">Chethan</a>
	</div>
	<div id="hoverbox">

	</div>
	<div style="text-align: center; ">
	Created by Chethan.N
	</div>
	</body>
	</html>