Tooltip with CSS with overflow hidden

      .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));
      }