Tooltip with CSS with overflow hidden

From the section portrayed here: https://cozynova.online/hackandslasher/#Farming-Equipment Is there any way for the CSS tooltip to being able to stay on top, while the parent has overflow-y: auto (so I could scroll through). This is the relevant code of the tooltip:
.custom-tooltip {
position: relative;
user-select: none;
}

.custom-tooltip::before,
.custom-tooltip::after {
--scale: 0;
--arrow-size: 5px;
position: absolute;
}

.custom-tooltip::before {
--translate-y: calc(-100% - var(--arrow-size));
}

.custom-tooltip:is(:hover, :focus)::before,
.custom-tooltip:is(:hover, :focus)::after {
--scale: 1;
}

.custom-tooltip::after {
--translate-y: calc(-1 * var(--arrow-size));
}
.custom-tooltip {
position: relative;
user-select: none;
}

.custom-tooltip::before,
.custom-tooltip::after {
--scale: 0;
--arrow-size: 5px;
position: absolute;
}

.custom-tooltip::before {
--translate-y: calc(-100% - var(--arrow-size));
}

.custom-tooltip:is(:hover, :focus)::before,
.custom-tooltip:is(:hover, :focus)::after {
--scale: 1;
}

.custom-tooltip::after {
--translate-y: calc(-1 * var(--arrow-size));
}
Wind Cutter Guide
Comprehensive, concise and dynamic Ragnarok Online guide.
8 Replies
Myndi
MyndiOP•2y ago
If you mouse over the Thanatos section, the items have CSS tooltips, but they hide under the parent.
Myndi
MyndiOP•2y ago
This one.
b1mind
b1mind•2y ago
Only way is to make them relative to something outside the scrolled container but then you need to do some different positioning, without JS it might be tricky to make them work exactly the same. So might have to compromise where the tip shows up in the box
Myndi
MyndiOP•2y ago
So no, no CSS approach, rather sadCat
b1mind
b1mind•2y ago
I mean I'm sure someone might have some cool way you could maybe? thing you would need to know is the pos of the span relative to the parent to position the tip on it
Myndi
MyndiOP•2y ago
I have the BS tooltips I was using for buttons, but I wanted to avoid them 😭
b1mind
b1mind•2y ago
which you can find solutions around for it lots of JS tooltips
Myndi
MyndiOP•2y ago
They're pretty handful though.
Want results from more Discord servers?
Add your server