41 lines
1.1 KiB
SCSS
41 lines
1.1 KiB
SCSS
// attr() hack from https://cyrneko.eu/css-tricks.html
|
|
@media (pointer: coarse), (hover: none) {
|
|
.tooltip,
|
|
abbr[title] {
|
|
display: inline-flex;
|
|
position: relative;
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: calc(100% + 0.25rem);
|
|
z-index: 9999;
|
|
backdrop-filter: var(--blur);
|
|
transition:
|
|
visibility var(--transition),
|
|
opacity var(--transition),
|
|
transform var(--transition-bezier);
|
|
box-shadow: var(--edge-highlight), var(--shadow);
|
|
border-radius: var(--rounded-corner-small);
|
|
background-color: var(--glass-bg-1);
|
|
padding: 0.125rem 0.375rem;
|
|
width: max-content;
|
|
content: attr(title);
|
|
-webkit-backdrop-filter: var(--blur);
|
|
transform: translateY(-0.5rem) scale(0.5);
|
|
transform-origin: top;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
max-width: calc(var(--content-width) / 3);
|
|
color: var(--fg-muted-2);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
&:focus::after,
|
|
&:hover::after {
|
|
transform: none;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|