bulma-tooltip/tooltip.sass at master · edwinyzh/bulma-tooltip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.tooltip
  position: relative
  &::after
    background: rgba(69, 77, 93, 0.9)
    border-radius: $radius
    bottom: 100%
    color: #fff
    content: attr(data-tooltip)
    display: block
    font-size: $size-7
    left: 50%
    max-width: 32rem
    opacity: 0
    overflow: hidden
    padding: .4rem .8rem
    pointer-events: none
    position: absolute
    text-overflow: ellipsis
    -webkit-transform: translate(-50%, 1rem)
    -ms-transform: translate(-50%, 1rem)
    transform: translate(-50%, 1rem)
    transition: all .2s ease
    white-space: nowrap
    z-index: 200
  &:focus::after, &:hover::after
    opacity: 1
    -webkit-transform: translate(-50%, -0.5rem)
    -ms-transform: translate(-50%, -0.5rem)
    transform: translate(-50%, -0.5rem)
  &[disabled], &.disabled
    pointer-events: auto
  &.tooltip-right
    &::after
      bottom: 50%
      left: 100%
      -webkit-transform: translate(-1rem, 50%)
      -ms-transform: translate(-1rem, 50%)
      transform: translate(-1rem, 50%)
    &:focus::after, &:hover::after
      -webkit-transform: translate(0.5rem, 50%)
      -ms-transform: translate(0.5rem, 50%)
      transform: translate(0.5rem, 50%)
  &.tooltip-bottom
    &::after
      bottom: auto
      top: 100%
      -webkit-transform: translate(-50%, -1rem)
      -ms-transform: translate(-50%, -1rem)
      transform: translate(-50%, -1rem)
    &:focus::after, &:hover::after
      -webkit-transform: translate(-50%, 0.5rem)
      -ms-transform: translate(-50%, 0.5rem)
      transform: translate(-50%, 0.5rem)
  &.tooltip-left
    &::after
      bottom: 50%
      left: auto
      right: 100%
      -webkit-transform: translate(1rem, 50%)
      -ms-transform: translate(1rem, 50%)
      transform: translate(1rem, 50%)
    &:focus::after, &:hover::after
      -webkit-transform: translate(-0.5rem, 50%)
      -ms-transform: translate(-0.5rem, 50%)
      transform: translate(-0.5rem, 50%)