utils/test/testapi/3rd_party/static/testapi-ui/assets/lib/bootstrap/less/tooltip.less

   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   // Reset font and text properties given new insertion method
  13   font-family: @font-family-base;
  14   font-size: @font-size-small;
  15   font-weight: normal;
  16   line-height: 1.4;
  17   .opacity(0);
  18
  19   &.in     { .opacity(@tooltip-opacity); }
  20   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
  21   &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
  22   &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
  23   &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
  24 }
  25
  26 // Wrapper for the tooltip content
  27 .tooltip-inner {
  28   max-width: @tooltip-max-width;
  29   padding: 3px 8px;
  30   color: @tooltip-color;
  31   text-align: center;
  32   text-decoration: none;
  33   background-color: @tooltip-bg;
  34   border-radius: @border-radius-base;
  35 }
  36
  37 // Arrows
  38 .tooltip-arrow {
  39   position: absolute;
  40   width: 0;
  41   height: 0;
  42   border-color: transparent;
  43   border-style: solid;
  44 }
  45 // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
  46 .tooltip {
  47   &.top .tooltip-arrow {
  48     bottom: 0;
  49     left: 50%;
  50     margin-left: -@tooltip-arrow-width;
  51     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  52     border-top-color: @tooltip-arrow-color;
  53   }
  54   &.top-left .tooltip-arrow {
  55     bottom: 0;
  56     right: @tooltip-arrow-width;
  57     margin-bottom: -@tooltip-arrow-width;
  58     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  59     border-top-color: @tooltip-arrow-color;
  60   }
  61   &.top-right .tooltip-arrow {
  62     bottom: 0;
  63     left: @tooltip-arrow-width;
  64     margin-bottom: -@tooltip-arrow-width;
  65     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  66     border-top-color: @tooltip-arrow-color;
  67   }
  68   &.right .tooltip-arrow {
  69     top: 50%;
  70     left: 0;
  71     margin-top: -@tooltip-arrow-width;
  72     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  73     border-right-color: @tooltip-arrow-color;
  74   }
  75   &.left .tooltip-arrow {
  76     top: 50%;
  77     right: 0;
  78     margin-top: -@tooltip-arrow-width;
  79     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  80     border-left-color: @tooltip-arrow-color;
  81   }
  82   &.bottom .tooltip-arrow {
  83     top: 0;
  84     left: 50%;
  85     margin-left: -@tooltip-arrow-width;
  86     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  87     border-bottom-color: @tooltip-arrow-color;
  88   }
  89   &.bottom-left .tooltip-arrow {
  90     top: 0;
  91     right: @tooltip-arrow-width;
  92     margin-top: -@tooltip-arrow-width;
  93     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  94     border-bottom-color: @tooltip-arrow-color;
  95   }
  96   &.bottom-right .tooltip-arrow {
  97     top: 0;
  98     left: @tooltip-arrow-width;
  99     margin-top: -@tooltip-arrow-width;
 100     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
 101     border-bottom-color: @tooltip-arrow-color;
 102   }
 103 }