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