44 lines
1 KiB
CSS
44 lines
1 KiB
CSS
@layer components {
|
|
.tip {
|
|
@apply relative;
|
|
|
|
&[data-tip]::before {
|
|
content: attr(data-tip);
|
|
@apply z-tooltip pointer-events-none absolute max-w-32 overflow-hidden rounded-xl bg-black px-2 py-1 text-xs text-ellipsis whitespace-nowrap text-white/90 opacity-0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
/* themes that lift buttons on hover give the host a transform, which makes it
|
|
a stacking context and traps the tooltip's z-index inside it */
|
|
&[data-tip]:hover {
|
|
@apply z-tooltip;
|
|
}
|
|
|
|
&[data-tip]:hover::before {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
|
|
.tip-top[data-tip]::before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-0.4rem);
|
|
}
|
|
|
|
.tip-left[data-tip]::before {
|
|
right: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(-0.4rem);
|
|
}
|
|
|
|
.tip-right[data-tip]::before {
|
|
left: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%) translateX(0.4rem);
|
|
}
|
|
|
|
/* mobile hides hover tooltips */
|
|
.mobile .tip[data-tip]::before {
|
|
display: none !important;
|
|
}
|
|
}
|