POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/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   // Reset font and text properties given new insertion method
  12   font-family: @font-family-base;
  13   font-size: @font-size-small;
  14   font-weight: normal;
  15   line-height: 1.4;
  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   text-decoration: none;
  32   background-color: @tooltip-bg;
  33   border-radius: @border-radius-base;
  34 }
  35
  36 // Arrows
  37 .tooltip-arrow {
  38   position: absolute;
  39   width: 0;
  40   height: 0;
  41   border-color: transparent;
  42   border-style: solid;
  43 }
  44 // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
  45 .tooltip {
  46   &.top .tooltip-arrow {
  47     bottom: 0;
  48     left: 50%;
  49     margin-left: -@tooltip-arrow-width;
  50     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  51     border-top-color: @tooltip-arrow-color;
  52   }
  53   &.top-left .tooltip-arrow {
  54     bottom: 0;
  55     right: @tooltip-arrow-width;
  56     margin-bottom: -@tooltip-arrow-width;
  57     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  58     border-top-color: @tooltip-arrow-color;
  59   }
  60   &.top-right .tooltip-arrow {
  61     bottom: 0;
  62     left: @tooltip-arrow-width;
  63     margin-bottom: -@tooltip-arrow-width;
  64     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  65     border-top-color: @tooltip-arrow-color;
  66   }
  67   &.right .tooltip-arrow {
  68     top: 50%;
  69     left: 0;
  70     margin-top: -@tooltip-arrow-width;
  71     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  72     border-right-color: @tooltip-arrow-color;
  73   }
  74   &.left .tooltip-arrow {
  75     top: 50%;
  76     right: 0;
  77     margin-top: -@tooltip-arrow-width;
  78     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  79     border-left-color: @tooltip-arrow-color;
  80   }
  81   &.bottom .tooltip-arrow {
  82     top: 0;
  83     left: 50%;
  84     margin-left: -@tooltip-arrow-width;
  85     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  86     border-bottom-color: @tooltip-arrow-color;
  87   }
  88   &.bottom-left .tooltip-arrow {
  89     top: 0;
  90     right: @tooltip-arrow-width;
  91     margin-top: -@tooltip-arrow-width;
  92     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  93     border-bottom-color: @tooltip-arrow-color;
  94   }
  95   &.bottom-right .tooltip-arrow {
  96     top: 0;
  97     left: @tooltip-arrow-width;
  98     margin-top: -@tooltip-arrow-width;
  99     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
 100     border-bottom-color: @tooltip-arrow-color;
 101   }
 102 }