// // Tooltips // ————————————————–
// Base class .tooltip {
position: absolute; z-index: @zindexTooltip; display: block; visibility: visible; font-size: 11px; line-height: 1.4; .opacity(0); &.in { .opacity(80); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } &.left { margin-left: -3px; padding: 0 5px; }
}
// Wrapper for the tooltip content .tooltip-inner {
max-width: 200px; padding: 8px; color: @tooltipColor; text-align: center; text-decoration: none; background-color: @tooltipBackground; .border-radius(@baseBorderRadius);
}
// Arrows .tooltip-arrow {
position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid;
} .tooltip {
&.top .tooltip-arrow { bottom: 1px; left: 50%; margin-left: -@tooltipArrowWidth; border-width: @tooltipArrowWidth @tooltipArrowWidth 0; border-top-color: @tooltipArrowColor; } &.right .tooltip-arrow { top: 50%; left: 1px; margin-top: -@tooltipArrowWidth; border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; border-right-color: @tooltipArrowColor; } &.left .tooltip-arrow { top: 50%; right: 1px; margin-top: -@tooltipArrowWidth; border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; border-left-color: @tooltipArrowColor; } &.bottom .tooltip-arrow { top: 1px; left: 50%; margin-left: -@tooltipArrowWidth; border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; border-bottom-color: @tooltipArrowColor; }
}