tutorial / directive

.xn-user{cursor:pointer ; position:relative;}
.xn-user .xn-user-card{display:none; z-index:9999; }
.xn-user.hover .xn-user-card{display:block;}
.xn-user-card	{position:absolute;padding-top:2px;padding-left:5px;}
.xn-user-card ul{
    list-style:none;overflow:hidden;
    background-color:white;
    padding:10px;
    border: 1px solid #DDD;
    width:320px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 1px 2px 4px #ccc;
    position: relative;
}
.xn-user-card ul .img{
    display: inline-block;
    width: 100px;
    height: 120px;
    box-shadow: 1px 2px 2px #ccc;
    border: 1px solid #fff;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius:0px;
}
.xn-user-card ul li{ margin:5px;width:290px;}
.xn-user-card ul li>span{ width:50px;text-align:right;display:inline-block;margin-right: 5px; }
.xn-user-card ul li.title{ line-height: 24px;font-size: 18px;color:#e44a3b;margin-bottom: 10px}
.xn-user-card ul li.title>.status{float: right}
.xn-user-card ul li a{margin-left: 5px;display: inline-block}