[data-tip] {
	position:relative;

}
[data-tip]:not([data-tip='']):before {
	content:'';
	display:none;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #f57c00;
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:not([data-tip='']):after {
  display: none;
  content: attr(data-tip);
  position: absolute;
  top: 35px;
  left: 0px;
  padding: 0px 8px;
  background: #f57c00;
  color: #fff;
  z-index: 9;
  font-size: .9rem;
  height: 35px;
  line-height: 35px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 2px;
  white-space: nowrap;
  word-wrap: normal;
}
[data-tip][data-pos='top']:not([data-tip='']):after {
  top: -50px;
}

[data-tip][data-pos='top']:not([data-tip='']):before {
  top: -15px;
  transform: rotate(180deg);
}

[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}