Наведите указатель мыши на промежуток, чтобы получить подсказку

Question

Ребята, знаете ли вы, как я могу отобразить всплывающую подсказку, если навести указатель мыши на значок диапазона, созданный только с помощью 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;
    }
}

Я могу заставить это работать, но только если оно зависает над div, и это не нужно поведение.Как побочный вопрос, является ли эта структура лучшим способом сделать то, чего я хочу достичь?

Answer 1

Если вы измените порядок div и span и используете этот CSS для состояния наведения, вы можете получить то, что ищете:

.i-q-mark:hover + .t-hover-block {
  opacity: 1;
}

HTML:

<div>
    <span class="i-q-mark">Span</span>
    <div class="t-hover-block">
        This is the tooltip!
    </div>
</div>

С помощью селектора смежных селекторов + вы можете выбрать следующий элемент