39 lines
864 B
CSS
39 lines
864 B
CSS
|
@layer components {
|
||
|
|
.tip {
|
||
|
|
@apply relative;
|
||
|
|
|
||
|
|
&[data-tip]::before {
|
||
|
|
content: attr(data-tip);
|
||
|
|
@apply bg-black text-white/90 absolute overflow-hidden rounded-xl text-xs text-ellipsis whitespace-nowrap opacity-0 px-2 py-1 z-tooltip max-w-32 pointer-events-none;
|
||
|
|
transition: opacity 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
&[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;
|
||
|
|
}
|
||
|
|
}
|