tools/side_chain_tool/web/node_modules/bootstrap/scss/_tooltip.scss

   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   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   .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   .arrow {
  36     bottom: 0;
  37
  38     &::before {
  39       top: 0;
  40       border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
  41       border-top-color: $tooltip-arrow-color;
  42     }
  43   }
  44 }
  45
  46 .bs-tooltip-right {
  47   padding: 0 $tooltip-arrow-height;
  48
  49   .arrow {
  50     left: 0;
  51     width: $tooltip-arrow-height;
  52     height: $tooltip-arrow-width;
  53
  54     &::before {
  55       right: 0;
  56       border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
  57       border-right-color: $tooltip-arrow-color;
  58     }
  59   }
  60 }
  61
  62 .bs-tooltip-bottom {
  63   padding: $tooltip-arrow-height 0;
  64
  65   .arrow {
  66     top: 0;
  67
  68     &::before {
  69       bottom: 0;
  70       border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
  71       border-bottom-color: $tooltip-arrow-color;
  72     }
  73   }
  74 }
  75
  76 .bs-tooltip-left {
  77   padding: 0 $tooltip-arrow-height;
  78
  79   .arrow {
  80     right: 0;
  81     width: $tooltip-arrow-height;
  82     height: $tooltip-arrow-width;
  83
  84     &::before {
  85       left: 0;
  86       border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
  87       border-left-color: $tooltip-arrow-color;
  88     }
  89   }
  90 }
  91
  92 .bs-tooltip-auto {
  93   &[x-placement^="top"] {
  94     @extend .bs-tooltip-top;
  95   }
  96   &[x-placement^="right"] {
  97     @extend .bs-tooltip-right;
  98   }
  99   &[x-placement^="bottom"] {
 100     @extend .bs-tooltip-bottom;
 101   }
 102   &[x-placement^="left"] {
 103     @extend .bs-tooltip-left;
 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 }