Hover tooltip overlay not working on mobile

I added some CSS for a hover tooltip on my site that expands when you hover (or click, on mobile) the pulsing circles. It works well on desktop but on mobile, the tooltip opens but is under the other circles. How can I fix this?

https://transformationinsights.io/hover-tooltip

Here's my code:

///////Pulsing circle///////
.pulsating-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;

  
  &:before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    z-index: -1;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #0071BC ;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
  }

}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}

//Tooltip CSS//
.pulsating-circle .rt-tooltip-box {
    min-width:200px; 
    top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#0C2B64;
    background-color:#99D6FF;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px #F0F3F5;
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.pulsating-circle:hover .rt-tooltip-box {
    visibility:visible; opacity:1;
}

.pulsating-circle .rt-tooltip-box i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.pulsating-circle .rt-tooltip-box i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#99D6FF;
    box-shadow:0 1px 8px #F0F3F5;
}

.pulsating-circle .lft-tooltip-box {
    min-width:200px; 
    top:50%;
    right:100%;
    margin-right:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#0C2B64;
    background-color:#99D6FF;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px #F0F3F5;
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.pulsating-circle:hover .lft-tooltip-box {
    visibility:visible; opacity:1;
}

.pulsating-circle .lft-tooltip-box i {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.pulsating-circle .lft-tooltip-box i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#99D6FF;
    box-shadow:0 1px 8px #E0E0E0;
}

.pulsating-circle .btm-tooltip-box {
    min-width:200px; 
    top:40px;
    left:50%;
    transform:translate(-50%, 0);
    padding:10px 20px;
    color:#0C2B64;
    background-color:#99D6FF;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    box-sizing:border-box;
    box-shadow:0 1px 8px #F0F3F5;
    visibility:hidden; opacity:0;          transition:opacity 0.8s;
    z-index: 9999999;
}

.pulsating-circle:hover .btm-tooltip-box {
    visibility:visible; 
    opacity:1; 
}

.pulsating-circle .btm-tooltip-box i {
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.pulsating-circle .btm-tooltip-box i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:#99D6FF;
    box-shadow:0 1px 8px #F0F3F5;
}

/////////////////////////////////
 

I don't see tooltip. How to open it?

It's the pulsing circles. When you hover your cursor over them, the tooltip expands

I see you figured it out? How did you solve it?