_tooltips.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. // Tooltips
  2. .tooltip {
  3. position: relative;
  4. &::after {
  5. background: rgba($dark-color, .9);
  6. border-radius: $border-radius;
  7. bottom: 100%;
  8. color: $light-color;
  9. content: attr(data-tooltip);
  10. display: block;
  11. font-size: $font-size-sm;
  12. left: 50%;
  13. max-width: $control-width-sm;
  14. opacity: 0;
  15. overflow: hidden;
  16. padding: $unit-1 $unit-2;
  17. pointer-events: none;
  18. position: absolute;
  19. text-overflow: ellipsis;
  20. transform: translate(-50%, $unit-2);
  21. transition: all .2s ease;
  22. white-space: pre;
  23. z-index: $zindex-3;
  24. }
  25. &:focus,
  26. &:hover {
  27. &::after {
  28. opacity: 1;
  29. transform: translate(-50%, -$unit-1);
  30. }
  31. }
  32. &[disabled],
  33. &.disabled {
  34. pointer-events: auto;
  35. }
  36. &.tooltip-right {
  37. &::after {
  38. bottom: 50%;
  39. left: 100%;
  40. transform: translate(-$unit-1, 50%);
  41. }
  42. &:focus,
  43. &:hover {
  44. &::after {
  45. transform: translate($unit-1, 50%);
  46. }
  47. }
  48. }
  49. &.tooltip-bottom {
  50. &::after {
  51. bottom: auto;
  52. top: 100%;
  53. transform: translate(-50%, -$unit-2);
  54. }
  55. &:focus,
  56. &:hover {
  57. &::after {
  58. transform: translate(-50%, $unit-1);
  59. }
  60. }
  61. }
  62. &.tooltip-left {
  63. &::after {
  64. bottom: 50%;
  65. left: auto;
  66. right: 100%;
  67. transform: translate($unit-2, 50%);
  68. }
  69. &:focus,
  70. &:hover {
  71. &::after {
  72. transform: translate(-$unit-1, 50%);
  73. }
  74. }
  75. }
  76. }