src/scss/bootstrap-4.0.0-alpha.6/scss/_tooltip.scss

   1 // Base class
   2 .tooltip {
   3   position: absolute;
   4   z-index: $zindex-tooltip;
   5   display: block;
   6   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   7   // So reset our font and text properties to avoid inheriting weird values.
   8   @include reset-text();
   9   font-size: $font-size-sm;
  10   // Allow breaking very long words so they don't overflow the tooltip's bounds
  11   word-wrap: break-word;
  12   opacity: 0;
  13
  14   &.show { opacity: $tooltip-opacity; }
  15
  16   &.tooltip-top,
  17   &.bs-tether-element-attached-bottom {
  18     padding: $tooltip-arrow-width 0;
  19     margin-top: -$tooltip-margin;
  20
  21     .tooltip-inner::before {
  22       bottom: 0;
  23       left: 50%;
  24       margin-left: -$tooltip-arrow-width;
  25       content: "";
  26       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
  27       border-top-color: $tooltip-arrow-color;
  28     }
  29   }
  30   &.tooltip-right,
  31   &.bs-tether-element-attached-left {
  32     padding: 0 $tooltip-arrow-width;
  33     margin-left: $tooltip-margin;
  34
  35     .tooltip-inner::before {
  36       top: 50%;
  37       left: 0;
  38       margin-top: -$tooltip-arrow-width;
  39       content: "";
  40       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
  41       border-right-color: $tooltip-arrow-color;
  42     }
  43   }
  44   &.tooltip-bottom,
  45   &.bs-tether-element-attached-top {
  46     padding: $tooltip-arrow-width 0;
  47     margin-top: $tooltip-margin;
  48
  49     .tooltip-inner::before {
  50       top: 0;
  51       left: 50%;
  52       margin-left: -$tooltip-arrow-width;
  53       content: "";
  54       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
  55       border-bottom-color: $tooltip-arrow-color;
  56     }
  57   }
  58   &.tooltip-left,
  59   &.bs-tether-element-attached-right {
  60     padding: 0 $tooltip-arrow-width;
  61     margin-left: -$tooltip-margin;
  62
  63     .tooltip-inner::before {
  64       top: 50%;
  65       right: 0;
  66       margin-top: -$tooltip-arrow-width;
  67       content: "";
  68       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
  69       border-left-color: $tooltip-arrow-color;
  70     }
  71   }
  72 }
  73
  74 // Wrapper for the tooltip content
  75 .tooltip-inner {
  76   max-width: $tooltip-max-width;
  77   padding: $tooltip-padding-y $tooltip-padding-x;
  78   color: $tooltip-color;
  79   text-align: center;
  80   background-color: $tooltip-bg;
  81   @include border-radius($border-radius);
  82
  83   &::before {
  84     position: absolute;
  85     width: 0;
  86     height: 0;
  87     border-color: transparent;
  88     border-style: solid;
  89   }
  90 }