Help icon with tooltip

help-icon.css

.info-icon {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	margin-bottom: .5em;
}

.info-icon-button {
	font-family: serif;
	font-weight: bold;
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	background: #eeeeee;
	border: 1px #000000 solid;
	color: #000000;
	border-radius: 8px;
}

.info-icon-popup {
	position: absolute;
	bottom: 28px;
	right: -16px;
	display: none;
	border-radius: 3px;
	padding: 5px;
	background: #ffffff;
	border: 1px #000000 solid;
	width: 240px;
	z-index: 500;
}

.info-icon:hover .info-icon-popup {
	display: block;
}

.info-icon-popup:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fff;
  bottom: -11px;
  right: 10px;
  z-index: 5;
}
 
.info-icon-popup:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #000000;
  bottom: -12px;
  right: 10px;
}

help-icon.html

<div class="info-icon"><div class="info-icon-button">i</div><div class="info-icon-popup"><p>Lorem ipsum et dolor sit amet</p></div></div>