[data-tooltip] 
{
  position: relative;
}
[data-tooltip]:after, [data-tooltip]:before 
{
  transform: translateY(10px);

  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
[data-tooltip]:before {
  content: attr(data-tooltip);
  background: #333;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  font-style: normal;
  padding: 10px 15px;
  border-radius: 5px;
  /*white-space: nowrap;*/
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 2;

  bottom: 100%;
  right: -100%;
  width: 300px;
  margin-bottom: 10px;
}
[data-tooltip]:after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';

  border-top-color: #333;
  border-bottom: none;
  bottom: 101%;
  left: calc(50% - 6px);
  margin-bottom: 4px;
}
[data-tooltip]:hover:after, [data-tooltip]:hover:before {
  visibility: visible;
  opacity: 0.95;
  transform: translateY(0px);
}

.icon-inf
{
	vertical-align: super;
	font-size: smaller; 
	background-color: #364a6c; 
	padding: 2px 9px; 
	border-radius: 10px; 
	color: #ddd;
	font-style: italic;
	font-weight: bold;
	cursor: default;
	display: inline-block;
}