47 lines
1.3 KiB
Sass
47 lines
1.3 KiB
Sass
@use '../abstracts' as *
|
|
@use '../base' as *
|
|
@use 'sass:color' // Already there for adjusts
|
|
|
|
// Tooltip styling (mouse-follow version)
|
|
.tooltip
|
|
position: relative
|
|
display: inline-block
|
|
cursor: help
|
|
font-size: 16px
|
|
color: $accent-light // Green accent for ?
|
|
margin-left: space('xs') // 0.25rem
|
|
top: 2px
|
|
|
|
.tooltiptext
|
|
visibility: hidden
|
|
width: 200px
|
|
background-color: $bg-darker // Darker bg
|
|
color: $text-light // White text
|
|
text-align: left // Changed to left-align for better readability
|
|
border-radius: 0 // Square
|
|
padding: space('sm') // 0.5rem
|
|
position: fixed // Fixed to viewport, updated by JS
|
|
z-index: z('dropdown') // High z-index
|
|
opacity: 0
|
|
transition: opacity 0.3s
|
|
font-size: 14px
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) // Subtle shadow
|
|
pointer-events: none // Prevents mouse interference with tooltip
|
|
|
|
&::after
|
|
content: ""
|
|
position: absolute
|
|
top: -5px // Arrow above tooltip (points up to mouse)
|
|
left: 10px // Slight indent from left edge
|
|
border-width: 5px
|
|
border-style: solid
|
|
border-color: $bg-darker transparent transparent transparent // Upward arrow
|
|
|
|
&:hover .tooltiptext
|
|
visibility: visible
|
|
opacity: 1
|
|
|
|
// Accessibility: Hidden tooltip text for screen readers
|
|
.tooltip-desc
|
|
position: absolute
|
|
left: -9999px |