/*
*  CSS Tooltips with arrow and shadow
*/

@import "variables.less";

.tooltip {
    cursor: pointer;
    position: relative; 
}
.tooltip > span {
    position: absolute !important;
    width: 100%;
    height: 10px;
    top: -20px;
    left: 0;
    visibility: hidden;
    z-index: 100;
}
.tooltip > span::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid @ttip-bgr-color;
	z-index: 101;
}
.tooltip > span > span {
    position: absolute !important;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    bottom: 0;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    padding: 10px 20px;
    font-size: @ttip-font-size;
    color: @ttip-font-color;
    background: @ttip-bgr-color;
    white-space: normal;
    -webkit-border-radius: @ttip-border-radius;
    -moz-border-radius: @ttip-border-radius;
    -ms-border-radius: @ttip-border-radius;
    border-radius: @ttip-border-radius;
	-webkit-box-shadow: @ttip-shadow;
    -moz-box-shadow: @ttip-shadow;
    -o-box-shadow: @ttip-shadow;
	box-shadow: @ttip-shadow;
}
.tooltip.tooltip-onbottom > span {
    top: auto;
	bottom: -20px;
}
.tooltip.tooltip-onbottom > span::before {
    bottom: 8px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid @ttip-bgr-color;
	border-top: none;
}
.tooltip.tooltip-onbottom > span > span {
    bottom: auto; 
}
.tooltip.tooltip-onright > span {
    top: 0;
	left: 100%;
}
.tooltip.tooltip-onright > span::before {
    left: 12px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid @ttip-bgr-color;
	border-left: none;
}
.tooltip.tooltip-onright > span > span {
    top: 50%;
	transform: translateY(-50%);
	left: 10px;
	bottom: auto;
    margin-left: 0; 
}
.tooltip.tooltip-onleft > span {
    top: 0;
	left: -30%;
	width: 10px;
}
.tooltip.tooltip-onleft > span::before {
    right: 2px;
	left: auto;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid @ttip-bgr-color;
	border-right: none;
}
.tooltip.tooltip-onleft > span > span {
    top: 50%;
	transform: translateY(-50%);
	left: -200px;
	bottom: auto;
    margin-left: 0; 
}
.tooltip.tooltip-sm > span > span {
    width: 100px;
    margin-left: -50px; 
}
.tooltip.tooltip-lg > span > span {
    width: 300px;
    margin-left: -150px; 
}
.tooltip.tooltip-lg.tooltip-onleft > span > span {
	left: -300px;
    margin-left: 0; 
}
.tooltip.tooltip-sm.tooltip-onleft > span > span {
	left: -100px;
    margin-left: 0; 
}
.tooltip.tooltip-center > span > span {
    text-align: center;
}
.tooltip:hover > span {
    visibility: visible;
	opacity: 1;
}