Kevin Powell - Community•2y ago

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•2y ago

If you mouse over the Thanatos section, the items have CSS tooltips, but they hide under the parent.

Myndi•2y ago

This one.

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•2y ago

So no, no CSS approach, rather sadCat

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•2y ago

I have the BS tooltips I was using for buttons, but I wanted to avoid them 😭

b1mind•2y ago

which you can find solutions around for it lots of JS tooltips

Myndi•2y ago

They're pretty handful though.

Gaming

Programming

Tooltip with CSS with overflow hidden