tooltip.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .tippy-box[data-theme~='tooltip'] {
  2. background-color: #262626;
  3. color: #fff;
  4. border-radius: $borderRadius;
  5. padding: 8px;
  6. font-size: 12px;
  7. line-height: 1.15;
  8. .tippy-arrow {
  9. width: 12px;
  10. height: 12px;
  11. color: #262626;
  12. &::before {
  13. content: '';
  14. position: absolute;
  15. border-color: transparent;
  16. border-style: solid;
  17. }
  18. }
  19. &[data-placement^='top'] > .tippy-arrow {
  20. bottom: 0;
  21. &::before {
  22. bottom: -5px;
  23. left: 0;
  24. border-width: 6px 6px 0;
  25. border-top-color: initial;
  26. transform-origin: center top;
  27. }
  28. }
  29. &[data-placement^='bottom'] > .tippy-arrow {
  30. top: 0;
  31. &::before {
  32. top: -5px;
  33. left: 0;
  34. border-width: 0 6px 6px;
  35. border-bottom-color: initial;
  36. transform-origin: center bottom;
  37. }
  38. }
  39. &[data-placement^='left'] > .tippy-arrow {
  40. right: 0;
  41. &::before {
  42. border-width: 6px 0 6px 6px;
  43. border-left-color: initial;
  44. right: -5px;
  45. transform-origin: center left;
  46. }
  47. }
  48. &[data-placement^='right'] > .tippy-arrow {
  49. left: 0;
  50. &::before {
  51. left: -5px;
  52. border-width: 6px 6px 6px 0;
  53. border-right-color: initial;
  54. transform-origin: center right;
  55. }
  56. }
  57. }