scss/bootstrap/_tooltip.scss

0001 // Base class
0002 .tooltip {
0003   position: absolute;
0004   z-index: $zindex-tooltip;
0005   display: block;
0006   margin: $tooltip-margin;
0007   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
0008   // So reset our font and text properties to avoid inheriting weird values.
0009   @include reset-text();
0010   @include font-size($tooltip-font-size);
0011   // Allow breaking very long words so they don't overflow the tooltip's bounds
0012   word-wrap: break-word;
0013   opacity: 0;
0014
0015   &.show { opacity: $tooltip-opacity; }
0016
0017   .tooltip-arrow {
0018     position: absolute;
0019     display: block;
0020     width: $tooltip-arrow-width;
0021     height: $tooltip-arrow-height;
0022
0023     &::before {
0024       position: absolute;
0025       content: "";
0026       border-color: transparent;
0027       border-style: solid;
0028     }
0029   }
0030 }
0031
0032 .bs-tooltip-top {
0033   padding: $tooltip-arrow-height 0;
0034
0035   .tooltip-arrow {
0036     bottom: 0;
0037
0038     &::before {
0039       top: -1px;
0040       border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
0041       border-top-color: $tooltip-arrow-color;
0042     }
0043   }
0044 }
0045
0046 .bs-tooltip-end {
0047   padding: 0 $tooltip-arrow-height;
0048
0049   .tooltip-arrow {
0050     left: 0;
0051     width: $tooltip-arrow-height;
0052     height: $tooltip-arrow-width;
0053
0054     &::before {
0055       right: -1px;
0056       border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
0057       border-right-color: $tooltip-arrow-color;
0058     }
0059   }
0060 }
0061
0062 .bs-tooltip-bottom {
0063   padding: $tooltip-arrow-height 0;
0064
0065   .tooltip-arrow {
0066     top: 0;
0067
0068     &::before {
0069       bottom: -1px;
0070       border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
0071       border-bottom-color: $tooltip-arrow-color;
0072     }
0073   }
0074 }
0075
0076 .bs-tooltip-start {
0077   padding: 0 $tooltip-arrow-height;
0078
0079   .tooltip-arrow {
0080     right: 0;
0081     width: $tooltip-arrow-height;
0082     height: $tooltip-arrow-width;
0083
0084     &::before {
0085       left: -1px;
0086       border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
0087       border-left-color: $tooltip-arrow-color;
0088     }
0089   }
0090 }
0091
0092 .bs-tooltip-auto {
0093   &[data-popper-placement^="top"] {
0094     @extend .bs-tooltip-top;
0095   }
0096   &[data-popper-placement^="right"] {
0097     @extend .bs-tooltip-end;
0098   }
0099   &[data-popper-placement^="bottom"] {
0100     @extend .bs-tooltip-bottom;
0101   }
0102   &[data-popper-placement^="left"] {
0103     @extend .bs-tooltip-start;
0104   }
0105 }
0106
0107 // Wrapper for the tooltip content
0108 .tooltip-inner {
0109   max-width: $tooltip-max-width;
0110   padding: $tooltip-padding-y $tooltip-padding-x;
0111   color: $tooltip-color;
0112   text-align: center;
0113   background-color: $tooltip-bg;
0114   @include border-radius($tooltip-border-radius);
0115 }