tools/side_chain_tool/web/node_modules/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   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  12   // So reset our font and text properties to avoid inheriting weird values.
  13   .reset-text();
  14   font-size: @font-size-small;
  15
  16   .opacity(0);
  17
  18   &.in     { .opacity(@tooltip-opacity); }
  19   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
  20   &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
  21   &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
  22   &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
  23 }
  24
  25 // Wrapper for the tooltip content
  26 .tooltip-inner {
  27   max-width: @tooltip-max-width;
  28   padding: 3px 8px;
  29   color: @tooltip-color;
  30   text-align: center;
  31   background-color: @tooltip-bg;
  32   border-radius: @border-radius-base;
  33 }
  34
  35 // Arrows
  36 .tooltip-arrow {
  37   position: absolute;
  38   width: 0;
  39   height: 0;
  40   border-color: transparent;
  41   border-style: solid;
  42 }
  43 // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
  44 .tooltip {
  45   &.top .tooltip-arrow {
  46     bottom: 0;
  47     left: 50%;
  48     margin-left: -@tooltip-arrow-width;
  49     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  50     border-top-color: @tooltip-arrow-color;
  51   }
  52   &.top-left .tooltip-arrow {
  53     bottom: 0;
  54     right: @tooltip-arrow-width;
  55     margin-bottom: -@tooltip-arrow-width;
  56     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  57     border-top-color: @tooltip-arrow-color;
  58   }
  59   &.top-right .tooltip-arrow {
  60     bottom: 0;
  61     left: @tooltip-arrow-width;
  62     margin-bottom: -@tooltip-arrow-width;
  63     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  64     border-top-color: @tooltip-arrow-color;
  65   }
  66   &.right .tooltip-arrow {
  67     top: 50%;
  68     left: 0;
  69     margin-top: -@tooltip-arrow-width;
  70     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  71     border-right-color: @tooltip-arrow-color;
  72   }
  73   &.left .tooltip-arrow {
  74     top: 50%;
  75     right: 0;
  76     margin-top: -@tooltip-arrow-width;
  77     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  78     border-left-color: @tooltip-arrow-color;
  79   }
  80   &.bottom .tooltip-arrow {
  81     top: 0;
  82     left: 50%;
  83     margin-left: -@tooltip-arrow-width;
  84     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  85     border-bottom-color: @tooltip-arrow-color;
  86   }
  87   &.bottom-left .tooltip-arrow {
  88     top: 0;
  89     right: @tooltip-arrow-width;
  90     margin-top: -@tooltip-arrow-width;
  91     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  92     border-bottom-color: @tooltip-arrow-color;
  93   }
  94   &.bottom-right .tooltip-arrow {
  95     top: 0;
  96     left: @tooltip-arrow-width;
  97     margin-top: -@tooltip-arrow-width;
  98     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  99     border-bottom-color: @tooltip-arrow-color;
 100   }
 101 }