.tooltip {
	position: relative;
	color: #ff0000;
}
.tooltip:before {
	content: attr(data-text);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 100%;
	margin-left: 15px;
	width: 200px;
	padding: 10px;
	border-radius: 10px;
	background: #000000;
	color: #fff;
    text-align:center;
    display:none; 
}
.tooltip:after {
  content: "";
  position:absolute;
  left:100%;
  margin-left:-5px;
  top:50%;
  transform:translateY(-50%);
  border:10px solid #000;
  border-color: transparent black transparent transparent;
  display:none;
}
.tooltip:hover:before, .tooltip:hover:after {
  display:block;
}