Why is the text not displayed on the tooltip?

Question

HTML

Here is an example:
codepen.io/Enclave88/pen/LpmOeE?editors=110

<span class="tooltipses-left" data-balloontip-left="Yeah, but..."><b>Loremi ipsum</b></span>

body {
  background: gray;
}

.tooltipses-left {
  &::after {
    background: black;
    border-radius: 6px;
    box-shadow: 1px 1px 10px gray;
    content: attr(data-balloontip-left);
    opacity: 1;
    position: absolute;
    top: 30px;
    left: 65px;
    visibility: visible;
    z-index: 3;
    width: 18rem;
    height: 3rem;
    /* padding: 1rem 0 0 0; */
  }
  &:hover {
    &::after, &::before {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s ease-out 1.0s;
    }
  }
  &::before {
    top: 5px;
    left: 85%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    border-color: black;
    border-right-color: black;
    border-width: 10px;
    margin-left: -10px;
    visibility: hidden;
    z-index: 3;
  }
}

I didn’t understand what the problem is, because in the example below, everything is fine:
codepen.io/Enclave88/pen/OyZOEj?editors=110

.tooltipses {
  &::after {
    background: black;
    border-radius: 6px;
    box-shadow: 1px 1px 10px gray;
    color: #fff;
    content: attr(data-balloontip);
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 40px;
    right: 0;
    visibility: hidden;
    z-index: 3;
    width: 18rem;
  }
  &:hover {
    &::after, &::before {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.4s ease-out 1.0s;
    }
  }
  &::before {
    top: 20px;
    left: 48%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    border-color: black;
    border-bottom-color: black;
    border-width: 10px;
    margin-left: -10px;
    visibility: hidden;
    z-index: 3;
  }
}

Look someone else, I seem to be missing something.