[Summary view] [Print] [Text view]

   1  //
   2  // Tooltips
   3  // --------------------------------------------------
   4  
   5  
   6  // Base class
   7  .tooltip {
   8    position: absolute;
   9    z-index: @zindexTooltip;
  10    display: block;
  11    visibility: visible;
  12    font-size: 11px;
  13    line-height: 1.4;
  14    .opacity(0);
  15    &.in     { .opacity(80); }
  16    &.top    { margin-top:  -3px; padding: 5px 0; }
  17    &.right  { margin-left:  3px; padding: 0 5px; }
  18    &.bottom { margin-top:   3px; padding: 5px 0; }
  19    &.left   { margin-left: -3px; padding: 0 5px; }
  20  }
  21  
  22  // Wrapper for the tooltip content
  23  .tooltip-inner {
  24    max-width: 200px;
  25    padding: 8px;
  26    color: @tooltipColor;
  27    text-align: center;
  28    text-decoration: none;
  29    background-color: @tooltipBackground;
  30    .border-radius(@baseBorderRadius);
  31  }
  32  
  33  // Arrows
  34  .tooltip-arrow {
  35    position: absolute;
  36    width: 0;
  37    height: 0;
  38    border-color: transparent;
  39    border-style: solid;
  40  }
  41  .tooltip {
  42    &.top .tooltip-arrow {
  43      bottom: 0;
  44      left: 50%;
  45      margin-left: -@tooltipArrowWidth;
  46      border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
  47      border-top-color: @tooltipArrowColor;
  48    }
  49    &.right .tooltip-arrow {
  50      top: 50%;
  51      left: 0;
  52      margin-top: -@tooltipArrowWidth;
  53      border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
  54      border-right-color: @tooltipArrowColor;
  55    }
  56    &.left .tooltip-arrow {
  57      top: 50%;
  58      right: 0;
  59      margin-top: -@tooltipArrowWidth;
  60      border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
  61      border-left-color: @tooltipArrowColor;
  62    }
  63    &.bottom .tooltip-arrow {
  64      top: 0;
  65      left: 50%;
  66      margin-left: -@tooltipArrowWidth;
  67      border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
  68      border-bottom-color: @tooltipArrowColor;
  69    }
  70  }