a[data-hint]:hover {
    position: relative;
}

a[data-hint]:hover:before {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNqU0UkRADAMw8BssYQ/xZZC5b/Hh+zunaAzTYpBSVAqKRuU0cpLyq0KBwWcQtovvSfAAGZnAY78B7OXAAAAAElFTkSuQmCC');
  position: absolute;
  top: -12px;
  left: 10px;
  white-space: nowrap;
  z-index: 20;
}

a[data-hint]:hover:after {
  content: attr(data-hint);
  padding: 4px 8px;
  color: #FFFFFF;
  position: absolute;
  top: -32px;
  left: 0;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  line-height: 20px;
  background: #242424;
  background-image: -moz-linear-gradient(top, #545454, #242424);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #545454),color-stop(1, #242424));
  background-image: -webkit-linear-gradient(top, #545454, #242424);
  background-image: -moz-linear-gradient(top, #545454, #242424);
  background-image: -ms-linear-gradient(top, #545454, #242424);
  background-image: -o-linear-gradient(top, #545454, #242424);
}