github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/tooltip.less (about)

     1  //
     2  // Tooltips
     3  // --------------------------------------------------
     4  
     5  
     6  // Base class
     7  .tooltip {
     8    position: absolute;
     9    z-index: @zindex-tooltip;
    10    display: block;
    11    visibility: visible;
    12    font-size: @font-size-small;
    13    line-height: 1.4;
    14    .opacity(0);
    15  
    16    &.in     { .opacity(@tooltip-opacity); }
    17    &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
    18    &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
    19    &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
    20    &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
    21  }
    22  
    23  // Wrapper for the tooltip content
    24  .tooltip-inner {
    25    max-width: @tooltip-max-width;
    26    padding: 3px 8px;
    27    color: @tooltip-color;
    28    text-align: center;
    29    text-decoration: none;
    30    background-color: @tooltip-bg;
    31    border-radius: @border-radius-base;
    32  }
    33  
    34  // Arrows
    35  .tooltip-arrow {
    36    position: absolute;
    37    width: 0;
    38    height: 0;
    39    border-color: transparent;
    40    border-style: solid;
    41  }
    42  .tooltip {
    43    &.top .tooltip-arrow {
    44      bottom: 0;
    45      left: 50%;
    46      margin-left: -@tooltip-arrow-width;
    47      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    48      border-top-color: @tooltip-arrow-color;
    49    }
    50    &.top-left .tooltip-arrow {
    51      bottom: 0;
    52      left: @tooltip-arrow-width;
    53      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    54      border-top-color: @tooltip-arrow-color;
    55    }
    56    &.top-right .tooltip-arrow {
    57      bottom: 0;
    58      right: @tooltip-arrow-width;
    59      border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    60      border-top-color: @tooltip-arrow-color;
    61    }
    62    &.right .tooltip-arrow {
    63      top: 50%;
    64      left: 0;
    65      margin-top: -@tooltip-arrow-width;
    66      border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    67      border-right-color: @tooltip-arrow-color;
    68    }
    69    &.left .tooltip-arrow {
    70      top: 50%;
    71      right: 0;
    72      margin-top: -@tooltip-arrow-width;
    73      border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    74      border-left-color: @tooltip-arrow-color;
    75    }
    76    &.bottom .tooltip-arrow {
    77      top: 0;
    78      left: 50%;
    79      margin-left: -@tooltip-arrow-width;
    80      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    81      border-bottom-color: @tooltip-arrow-color;
    82    }
    83    &.bottom-left .tooltip-arrow {
    84      top: 0;
    85      left: @tooltip-arrow-width;
    86      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    87      border-bottom-color: @tooltip-arrow-color;
    88    }
    89    &.bottom-right .tooltip-arrow {
    90      top: 0;
    91      right: @tooltip-arrow-width;
    92      border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    93      border-bottom-color: @tooltip-arrow-color;
    94    }
    95  }