Hover over span to get tool tip div - html

Question

Do you guys know how I can get my tooltip to show up if I hover my mouse over the span icon I created only using css?
HTML
<div>
<div class="t-hover-block">
This is the tooltip!
</div>
<span class="i-q-mark"></span>
</div>
CSS
.t-hover-block {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.3);
border-radius: 1.429em;
font-size: 10pt;
padding: 0.929em;
width: 16em;
top: 40.4%;
left: 61%;
text-align: left;
background: rgba(255, 255, 255, 1);
box-shadow: 4px 3px 34px -3px rgba(245, 188, 223, 1);
&:hover {
opacity: 1;
}
}
.t-hover-block::after {
background-color: rgba(255, 255, 255, 1);
content: '\00a0';
height: 0.857em;
width: 1.071em;
position: absolute;
top: 40%;
left: 97%;
transform: rotate(29deg) skew(-35deg);
border: solid 1px rgba(181, 49, 134, 0.3);
border-left: none;
border-bottom: none;
}
.i-q-mark {
display: inline-block;
width: 2em;
height: 2em;
background-color: $color-brand;
border-radius: 50%;
text-align: center;
margin-top: 0.643em;
margin-left: 0.714em;
line-height: 2.071em;
&:after {
font-family: 'Raleway';
content: '\3F'; // Hex value for question mark
color: #ffffff;
font-size: 16pt;
font-weight: 700;
}
}
I can get this to work but only if it hovers over the div and that's not the behavior needed. As a side question is this structure the best way of doing that I want to achieve?

Answer 1

If you flip the order of the div and span, and use this css for the hover state, you can get what you are looking for:
.i-q-mark:hover + .t-hover-block {
opacity: 1;
}
the HTML:
<div>
<span class="i-q-mark">Span</span>
<div class="t-hover-block">
This is the tooltip!
</div>
</div>
Using the adjacentsibling selector + you can target the next element