[Summary view] [Print] [Text view]

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