mirror of
https://github.com/explosion/spaCy.git
synced 2025-11-04 09:57:26 +03:00
45 lines
1.3 KiB
Sass
45 lines
1.3 KiB
Sass
// Tooltips - Variables
|
|
// ============================================================================
|
|
|
|
$tooltip-background : color(black)
|
|
$tooltip-border-radius : $border-radius
|
|
$tooltip-color : color(white)
|
|
$tooltip-padding : 0.15rem 1rem
|
|
|
|
|
|
// Tooltips - Style
|
|
// ============================================================================
|
|
|
|
// [data-tooltip] - tooltip
|
|
// :after - tooltip content
|
|
// :hover - display tooltip on hover
|
|
// .visible - makes tooltip visible
|
|
|
|
[data-tooltip]
|
|
display: inline
|
|
position: relative
|
|
|
|
&:after
|
|
@extend .text, .text-small
|
|
@include position(absolute, top, left, 125%, 50%)
|
|
background: $tooltip-background
|
|
border-radius: $tooltip-border-radius
|
|
color: $tooltip-color
|
|
content: attr(data-tooltip)
|
|
opacity: 0
|
|
padding: $tooltip-padding
|
|
text-shadow: none
|
|
text-transform: none
|
|
transform: translateX(-50%) translateY(-2px)
|
|
transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1)
|
|
visibility: hidden
|
|
white-space: nowrap
|
|
z-index: 200
|
|
|
|
&:hover:after,
|
|
&.visible:after
|
|
display: block
|
|
opacity: 1
|
|
transform: translateX(-50%) translateY(0)
|
|
visibility: visible
|