I want to make a utility box on the left side of my page, with two buttons: A blue one and a grey one. The grey one has a tooltip within it.
Here is the code:
body {background:black}
#side-root {
position:fixed;
bottom:0;
z-index:9999;
display:flex;
width:100%;
top: 50%;
flex-direction: column;
width: 65px !important;
bottom:auto !important;
transform:translate(0,-50%);
left:0;
padding-right:40px;
}
#side-root a:hover, #side-root b:hover{
padding-left:9px;
}
#side-root a div, #side-root b div{
height:45px;
width:45px;
background-repeat:no-repeat;
margin:0 auto;
background-size:45px
}
.side-a {
background:#1877F2d6;
width:100%;
cursor:pointer;
backdrop-filter:blur(15px) contrast(5);
}
.side-a:hover {
background:#1877F2;
backdrop-filter:none;
}
.side-b {
background:#B1B1B1d6;
width:100%;
cursor:pointer;
backdrop-filter:blur(15px) contrast(5);
}
.side-b:hover {
background:#B1B1B1;
backdrop-filter:none;
}
.b-tooltip {
position: fixed;
white-space: nowrap;
width: auto !important;
height: auto !important;
padding: 0.5rem;
font-size: 0.875rem;
box-shadow: 0 1px 1px rgba(173, 168, 168, 0.1);
border-radius: 3px;
background-color: #333;
color: #fff;
border: 1px solid #333;
line-height: 18px;
box-sizing: border-box;
transition: opacity .2s ease-in-out;
z-index:9;
top:4px;
left:76px;
}
.b-tooltip svg {
position: static;
fill: #fff;
margin-right: 0.5rem;
width: 14px;
height: 14px;
vertical-align: middle;
}<div id="side-root">
<a class="side-a">
<div class="side-a-icon"></div>
</a>
<b class="side-b">
<div class="side-b-icon">
<div class="b-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38"><path d="M19 0C8.5 0 0 8.5 0 19s8.5 19 19 19 19-8.5 19-19S29.5 0 19 0zm0 24.8c-1.6 1.6-4.2 1.6-5.8 0l-5.4-5.4 2.9-2.9 5.4 5.4 11-11 2.9 2.9-11 11z"></path></svg>
<span>done</span>
</div>
</div>
</b>
</div>The expected behavior is to keep the .b-tooltip box always fixed. However, it's very strange that if I hover the mouse on the .side-b, the .b-tooltip box would go up.
What's even weird is that this happens only on Chrome Version 96.0.4664.55 (Official Build) (x86_64) :
And even worse, is that on Safari Version 15.1 (17612.2.9.1.20), it's still not right (the problem is that .b-tooltip is always on the first blue box, which should be on the second grey box)
What I want is:
- Don't shift the
.b-tooltipbox when I hover - Make the
.b-tooltipbox's position related to the second grey box, not the first blue box.
