LetterJay
54 lines
1.2 KiB
Stylus
54 lines
1.2 KiB
Stylus
div[data-tooltip], span[data-tooltip]
|
|
position: relative
|
|
|
|
&::after
|
|
position: absolute
|
|
display: block
|
|
z-index: 2
|
|
width: 250px
|
|
padding: 10px
|
|
transform: translateX(-50%)
|
|
|
|
visibility: hidden
|
|
opacity: 0
|
|
|
|
white-space: normal
|
|
text-align: left
|
|
content: attr(data-tooltip)
|
|
|
|
transition: all .5s
|
|
border: 1px solid tooltip-color-border
|
|
background-color: tooltip-color-background
|
|
|
|
&:hover::after
|
|
visibility: visible
|
|
opacity: 1
|
|
|
|
&.tooltip-top::after
|
|
bottom: 100%
|
|
left: 50%
|
|
transform: translateX(-50%) translateY(8px)
|
|
&.tooltip-top:hover::after
|
|
transform: translateX(-50%) translateY(-8px)
|
|
|
|
&.tooltip-bottom::after
|
|
top: 100%
|
|
left: 50%
|
|
transform: translateX(-50%) translateY(-8px)
|
|
&.tooltip-bottom:hover::after
|
|
transform: translateX(-50%) translateY(8px)
|
|
|
|
&.tooltip-left::after
|
|
top: 50%
|
|
right: 100%
|
|
transform: translateX(8px) translateY(-50%)
|
|
&.tooltip-left:hover::after
|
|
transform: translateX(-8px) translateY(-50%)
|
|
|
|
&.tooltip-right::after
|
|
top: 50%
|
|
left: 100%
|
|
transform: translateX(-8px) translateY(-50%)
|
|
&.tooltip-right:hover::after
|
|
transform: translateX(8px) translateY(-50%)
|