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;
}
/////////////////////////////////
