Simple CSS Popover

index.css

.user {
  position: relative;
  padding: 8px 12px 8px 8px;
  display: inline-block;
}
.user:hover div {
  visibility: visible;
  opacity: 1;
  padding: 4px 12px 6px 8px;
}
.user div {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  border: 1px solid;
  border-color: #777 #6c6c6c #666;
  border-radius: 5px;
  -webkit-transition-property: opacity, padding, visibility;
  -moz-transition-property: opacity, padding, visibility;
  -ms-transition-property: opacity, padding, visibility;
  -o-transition-property: opacity, padding, visibility;
  transition-property: opacity, padding, visibility;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  background-color: #d9e3fa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eef3fe), color-stop(100%, #d9e3fa));
  background-image: -webkit-linear-gradient(top, #eef3fe, #d9e3fa);
  background-image: -moz-linear-gradient(top, #eef3fe, #d9e3fa);
  background-image: -ms-linear-gradient(top, #eef3fe, #d9e3fa);
  background-image: -o-linear-gradient(top, #eef3fe, #d9e3fa);
  background-image: linear-gradient(top, #eef3fe, #d9e3fa);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.user div:before, .user div:after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: 15px;
  border: 7px outset transparent;
}
.user div:before {
  border-bottom: 7px solid #555;
  top: -14px;
}
.user div:after {
  border-bottom: 7px solid #EEF3FE;
  top: -12px;
}

index.htm

<section class="main">
  <div class="user">
    <img src="img/avatar.png">
    <div>popover contents</div>
  </div>
</section>