_tooltip.scss 970 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. // Base class
  2. .tooltip {
  3. opacity: 0;
  4. &.show { opacity: $tooltip-opacity-alt; }
  5. }
  6. .bs-tooltip-top,
  7. .bs-tooltip-auto[data-popper-placement^="top"] {
  8. .tooltip-arrow {
  9. &::before {
  10. border-top-color: $tooltip-arrow-color-alt;
  11. }
  12. }
  13. }
  14. .bs-tooltip-end,
  15. .bs-tooltip-auto[data-popper-placement^="right"] {
  16. .tooltip-arrow {
  17. &::before {
  18. border-right-color: $tooltip-arrow-color-alt;
  19. }
  20. }
  21. }
  22. .bs-tooltip-bottom,
  23. .bs-tooltip-auto[data-popper-placement^="bottom"] {
  24. .tooltip-arrow {
  25. &::before {
  26. border-bottom-color: $tooltip-arrow-color-alt;
  27. }
  28. }
  29. }
  30. .bs-tooltip-start,
  31. .bs-tooltip-auto[data-popper-placement^="left"] {
  32. .tooltip-arrow {
  33. &::before {
  34. border-left-color: $tooltip-arrow-color-alt;
  35. }
  36. }
  37. }
  38. // ***NOTE***: Do not use @extend as that would extend the base class and the dark class
  39. // Wrapper for the tooltip content
  40. .tooltip-inner {
  41. color: $tooltip-color-alt;
  42. background-color: $tooltip-bg-alt;
  43. }