138 lines
3 KiB
CSS
138 lines
3 KiB
CSS
/**
|
|
* Tooltip.css
|
|
*
|
|
* Styles for the portal-based Tooltip component.
|
|
* These tooltips are rendered to document.body to escape overflow:hidden containers.
|
|
*
|
|
* @package @glam/ui
|
|
*/
|
|
|
|
/* Tooltip trigger wrapper - should not affect layout */
|
|
.ui-tooltip-trigger {
|
|
display: inline-flex;
|
|
/* Ensure the trigger doesn't create layout issues */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Tooltip container - positioned via portal */
|
|
.ui-tooltip {
|
|
position: fixed;
|
|
z-index: 10000;
|
|
/* Critical: prevent tooltip from capturing mouse events */
|
|
pointer-events: none !important;
|
|
/* Smooth fade in without transform animation that could cause flicker */
|
|
opacity: 1;
|
|
animation: tooltip-fade-in 0.15s ease-out forwards;
|
|
}
|
|
|
|
@keyframes tooltip-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Tooltip content box */
|
|
.ui-tooltip__content {
|
|
background: #1e293b;
|
|
color: #fff;
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
font-size: 0.72rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
white-space: pre-line;
|
|
text-align: left;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
|
/* Ensure content doesn't capture events either */
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Arrow pointer */
|
|
.ui-tooltip__arrow {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid transparent;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Position: bottom (default) - tooltip appears below trigger */
|
|
.ui-tooltip--bottom {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ui-tooltip--bottom .ui-tooltip__arrow {
|
|
top: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-bottom-color: #1e293b;
|
|
border-top: none;
|
|
}
|
|
|
|
/* Position: top - tooltip appears above trigger */
|
|
.ui-tooltip--top {
|
|
transform: translate(-50%, -100%);
|
|
}
|
|
|
|
.ui-tooltip--top .ui-tooltip__arrow {
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-top-color: #1e293b;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Position: left - tooltip appears to the left of trigger */
|
|
.ui-tooltip--left {
|
|
transform: translate(-100%, -50%);
|
|
}
|
|
|
|
.ui-tooltip--left .ui-tooltip__arrow {
|
|
right: -6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-left-color: #1e293b;
|
|
border-right: none;
|
|
}
|
|
|
|
/* Position: right - tooltip appears to the right of trigger */
|
|
.ui-tooltip--right {
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.ui-tooltip--right .ui-tooltip__arrow {
|
|
left: -6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-right-color: #1e293b;
|
|
border-left: none;
|
|
}
|
|
|
|
/* =============================================================================
|
|
Dark Mode
|
|
============================================================================= */
|
|
|
|
[data-theme="dark"] .ui-tooltip__content {
|
|
background: #252538;
|
|
color: #e0e0e0;
|
|
border: 1px solid #404050;
|
|
}
|
|
|
|
[data-theme="dark"] .ui-tooltip--bottom .ui-tooltip__arrow {
|
|
border-bottom-color: #404050;
|
|
}
|
|
|
|
[data-theme="dark"] .ui-tooltip--top .ui-tooltip__arrow {
|
|
border-top-color: #404050;
|
|
}
|
|
|
|
[data-theme="dark"] .ui-tooltip--left .ui-tooltip__arrow {
|
|
border-left-color: #404050;
|
|
}
|
|
|
|
[data-theme="dark"] .ui-tooltip--right .ui-tooltip__arrow {
|
|
border-right-color: #404050;
|
|
}
|