Размещение всплывающей подсказки слева / в начале div

Question

Я здесь новенький, и это мой первый вопрос. :)

Я пытаюсь показать всплывающую подсказку в начале div. На данный момент он отображается прямо под значком, который его запускает. Перед этим значком находится текст. Я бы хотел, чтобы это было в начале текста. Это будет список с текстами и наборами инструментов. Я знаю, что могу просто сделать это один за другим и sh через left: -50% для примера, но было бы круто, когда есть код, который автоматически помещает его влево.

Например упомянутый текст:

Geeignete Anzahl monatl. Besuche (ICON) -> Поместите всплывающую подсказку в начало текста при его запуске через значок.

Вот мой код:

.tooltips {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltips .tooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: #FFFFFF;
    color: #7A7A7A;
    border-radius: 3px;
    padding: 10px;
    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0%;
}

.tooltips:hover .tooltiptext {
    visibility: visible;
    font-size: 13px;
}

Geeignete Anzahl monatl. Besuche 
<div class="tooltips">&spades;
    <span class="tooltiptext">Tooltip text</span>
</div>

Спасибо за вашу помощь!

Answer 1

Ваш родительский div действует как относительный контейнер для абсолютно позиционированного дочернего div, который содержит всплывающую подсказку. Таким образом, он отображается над значком, как и ожидалось. Включите текст, содержащий всплывающую подсказку, в контейнер, и он будет отображаться должным образом. После изменения верхнего / левого значений на допустимое значение 0. За исключением случаев, когда вы это делаете, теперь каждое наведение отменяется панелью всплывающих подсказок, отображаемой над значком, что дает вам неприятный эффект вспыхивающей всплывающей подсказки. Таким образом, вам нужно разделить их, чтобы, пока пользователь наводил указатель мыши на значок, отображалась всплывающая подсказка, и наоборот. Вот для начала. Ура!

.tooltips {
    position: relative;
    display: inline;
}

.tooltips .tooltiptext {
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
    visibility: hidden;
    background-color: #FFFFFF;
    color: #7A7A7A;
    border-radius: 3px;    
    font-size: 13px;
    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: 15px;
    background-color: #f1f1f1;
}
.tooltipicon { display:inline; cursor: help }
.tooltipicon:hover { background-color: red; }
.tooltipicon:hover + .tooltiptext {
    visibility: visible;
}

<div class="tooltips">
    Geeignete Anzahl monatl. Besuche <div class="tooltipicon">&spades;</div>
    <div class="tooltiptext">Tooltip text</div>
</div>