resources/scss/bootstrap/_tooltip.scss

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