bulma-tooltip.sass 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. @import 'position'
  2. $tooltip-background-color: $grey-dark !default
  3. $tooltip-background-opacity: 0.9 !default
  4. $tooltip-max-width: 24rem !default
  5. .tooltip
  6. position: relative
  7. &:hover,
  8. &.is-tooltip-active
  9. &:not(.is-loading)
  10. &::after
  11. z-index: 99999
  12. position: absolute
  13. display: inline-block
  14. pointer-events: none
  15. &::before
  16. z-index: 99999
  17. position: absolute
  18. display: inline-block
  19. pointer-events: none
  20. &:not(.is-loading)
  21. &::after
  22. content: ""
  23. border-style: solid
  24. border-width: .5rem
  25. &::before
  26. opacity: 0
  27. content: attr(data-tooltip)
  28. overflow: hidden
  29. white-space: nowrap
  30. text-overflow: ellipsis
  31. font-size: $size-7
  32. padding: .4rem .8rem
  33. background: rgba($tooltip-background-color, $tooltip-background-opacity)
  34. border-radius: $radius
  35. color: $white
  36. max-width: $tooltip-max-width
  37. &:focus,
  38. &:hover,
  39. &.is-tooltip-active
  40. &:not(.is-loading)
  41. &::after
  42. opacity: 1
  43. margin-left: -.5rem
  44. margin-top: -.5rem
  45. &::before
  46. opacity: 1
  47. +top
  48. &.is-tooltip-right
  49. +right
  50. &.is-tooltip-bottom
  51. +bottom
  52. &.is-tooltip-left
  53. +left
  54. &.is-tooltip-multiline
  55. &::before
  56. min-width: $tooltip-max-width
  57. text-overflow: clip
  58. white-space: normal
  59. word-break: keep-all
  60. @each $name, $pair in $colors
  61. $color: nth($pair, 1)
  62. $color-invert: nth($pair, 2)
  63. &.is-tooltip-#{$name}
  64. &:not(.is-loading)
  65. &::after
  66. border-color: rgba($color, $tooltip-background-opacity) transparent transparent transparent
  67. &.is-tooltip-right
  68. &:not(.is-loading)
  69. &::after
  70. border-color: transparent rgba($color, $tooltip-background-opacity) transparent transparent
  71. &.is-tooltip-bottom
  72. &:not(.is-loading)
  73. &::after
  74. border-color: transparent transparent rgba($color, $tooltip-background-opacity) transparent
  75. &.is-tooltip-left
  76. &:not(.is-loading)
  77. &::after
  78. border-color: transparent transparent transparent rgba($color, $tooltip-background-opacity)
  79. &::before
  80. background: rgba($color, $tooltip-background-opacity)
  81. color: $color-invert
  82. @import 'dispatcher'