funcunit/site/theme/static/styles/tooltip.less

<!-- @hide title

.has-tip {
	background-color: rgba(238, 168, 30, 0.2);
	cursor: pointer;
	position: relative;
	display: inline-block;
}
.has-tip .tooltip {
	position: absolute;
	display: block;
	top: 0;
}
.has-tip .tooltip:before {
	position:absolute;
	content : '';
	height : 10px;
	width: 10px;
	background: @dark;
	-moz-transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
	-o-transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
	-webkit-transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
	-ms-transform : rotate(-45deg);
	transform : rotateZ(-45deg) skewY(5deg) skewX(5deg);
	border: 1px solid #fff;
	top: 7px;
	z-index: -1;
	display: block;
	left: -6px;
	border-right-style: none;
	border-bottom-style: none;
}
.tooltip {
	padding: 5px 10px;
	background-color: @dark;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
	border: 1px solid #fff;
	-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	.border-radius(4px);
	cursor: default;
	display: inline-block;
	position: relative;
	z-index: 0;
}
.index .example .has-tip .tooltip {
	width: 250px;
	right: -300px;
}