tooltip.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. .vxe-tooltip--wrapper {
  2. display: none;
  3. position: absolute;
  4. top: -100%;
  5. left: -100%;
  6. font-size: 12px;
  7. border-radius: var(--vxe-ui-base-border-radius);
  8. white-space: normal;
  9. word-break: break-word;
  10. box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
  11. color: var(--vxe-ui-font-color);
  12. font-family: var(--vxe-ui-font-family);
  13. &:not(.is--enterable) {
  14. pointer-events: none;
  15. }
  16. &.is--visible {
  17. display: inline-block;
  18. }
  19. &.is--arrow {
  20. .vxe-tooltip--arrow {
  21. display: block;
  22. }
  23. }
  24. &.is--enterable {
  25. &:after {
  26. content: "";
  27. position: absolute;
  28. left: 0;
  29. width: 100%;
  30. height: 6px;
  31. background-color: transparent;
  32. }
  33. }
  34. .vxe-tooltip--content {
  35. padding: 8px 12px;
  36. max-width: 600px;
  37. max-height: 800px;
  38. white-space: pre-line;
  39. border-radius: var(--vxe-ui-base-border-radius);
  40. overflow: auto;
  41. }
  42. .vxe-tooltip--arrow {
  43. display: none;
  44. position: absolute;
  45. border-color: transparent;
  46. border-width: 6px;
  47. border-style: solid;
  48. left: 50%;
  49. transform: translateX(-6px);
  50. &:before {
  51. content: "";
  52. position: absolute;
  53. border-color: transparent;
  54. border-width: 5px;
  55. border-style: solid;
  56. left: -5px;
  57. }
  58. }
  59. &.placement--top {
  60. &.is--enterable {
  61. &:after {
  62. bottom: -6px;
  63. }
  64. }
  65. .vxe-tooltip--arrow {
  66. bottom: -11px;
  67. &:before {
  68. top: -7px;
  69. }
  70. }
  71. }
  72. &.placement--bottom {
  73. &.is--enterable {
  74. &:after {
  75. top: -6px;
  76. }
  77. }
  78. .vxe-tooltip--arrow {
  79. top: -11px;
  80. &:before {
  81. top: -3px;
  82. }
  83. }
  84. }
  85. }
  86. .vxe-tooltip--wrapper {
  87. &.theme--light {
  88. background-color: var(--vxe-ui-layout-background-color);
  89. border: 1px solid var(--vxe-ui-input-border-color);
  90. &.placement--top {
  91. .vxe-tooltip--arrow {
  92. border-top-color: var(--vxe-ui-input-border-color);
  93. &:before {
  94. border-top-color: var(--vxe-ui-layout-background-color);
  95. }
  96. }
  97. }
  98. &.placement--bottom {
  99. .vxe-tooltip--arrow {
  100. border-bottom-color: var(--vxe-ui-input-border-color);
  101. &:before {
  102. border-bottom-color: var(--vxe-ui-layout-background-color);
  103. }
  104. }
  105. }
  106. }
  107. &.theme--dark {
  108. background: var(--vxe-ui-tooltip-dark-background-color);
  109. color: var(--vxe-ui-tooltip-dark-color);
  110. &.placement--top {
  111. .vxe-tooltip--arrow {
  112. border-top-color: var(--vxe-ui-tooltip-dark-background-color);
  113. &:before {
  114. border-top-color: var(--vxe-ui-tooltip-dark-background-color);
  115. }
  116. }
  117. }
  118. &.placement--bottom {
  119. .vxe-tooltip--arrow {
  120. border-bottom-color: var(--vxe-ui-tooltip-dark-background-color);
  121. &:before {
  122. border-bottom-color: var(--vxe-ui-tooltip-dark-background-color);
  123. }
  124. }
  125. }
  126. }
  127. }