info@54: //
info@54: // Tooltips
info@54: // --------------------------------------------------
info@54: 
info@54: 
info@54: // Base class
info@54: .tooltip {
info@54:   position: absolute;
info@54:   z-index: @zindex-tooltip;
info@54:   display: block;
info@54:   visibility: visible;
info@54:   font-size: @font-size-small;
info@54:   line-height: 1.4;
info@54:   .opacity(0);
info@54: 
info@54:   &.in     { .opacity(.9); }
info@54:   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
info@54:   &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
info@54:   &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
info@54:   &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
info@54: }
info@54: 
info@54: // Wrapper for the tooltip content
info@54: .tooltip-inner {
info@54:   max-width: @tooltip-max-width;
info@54:   padding: 3px 8px;
info@54:   color: @tooltip-color;
info@54:   text-align: center;
info@54:   text-decoration: none;
info@54:   background-color: @tooltip-bg;
info@54:   border-radius: @border-radius-base;
info@54: }
info@54: 
info@54: // Arrows
info@54: .tooltip-arrow {
info@54:   position: absolute;
info@54:   width: 0;
info@54:   height: 0;
info@54:   border-color: transparent;
info@54:   border-style: solid;
info@54: }
info@54: .tooltip {
info@54:   &.top .tooltip-arrow {
info@54:     bottom: 0;
info@54:     left: 50%;
info@54:     margin-left: -@tooltip-arrow-width;
info@54:     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
info@54:     border-top-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.top-left .tooltip-arrow {
info@54:     bottom: 0;
info@54:     left: @tooltip-arrow-width;
info@54:     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
info@54:     border-top-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.top-right .tooltip-arrow {
info@54:     bottom: 0;
info@54:     right: @tooltip-arrow-width;
info@54:     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
info@54:     border-top-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.right .tooltip-arrow {
info@54:     top: 50%;
info@54:     left: 0;
info@54:     margin-top: -@tooltip-arrow-width;
info@54:     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
info@54:     border-right-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.left .tooltip-arrow {
info@54:     top: 50%;
info@54:     right: 0;
info@54:     margin-top: -@tooltip-arrow-width;
info@54:     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
info@54:     border-left-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.bottom .tooltip-arrow {
info@54:     top: 0;
info@54:     left: 50%;
info@54:     margin-left: -@tooltip-arrow-width;
info@54:     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
info@54:     border-bottom-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.bottom-left .tooltip-arrow {
info@54:     top: 0;
info@54:     left: @tooltip-arrow-width;
info@54:     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
info@54:     border-bottom-color: @tooltip-arrow-color;
info@54:   }
info@54:   &.bottom-right .tooltip-arrow {
info@54:     top: 0;
info@54:     right: @tooltip-arrow-width;
info@54:     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
info@54:     border-bottom-color: @tooltip-arrow-color;
info@54:   }
info@54: }