resources/tools/dash/app/pal/static/sass/bootstrap/_tooltip.scss

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