Positioning the tooltip to the left/beginning of the div

Question

I´m new here and this is my first question. :)

I´m trying to show a tooltip at the beginning of the div. At the moment, it shows up right under the icon that triggers it. Before that icon is text. I would love to have it at the beginning of the text. It will be a list with texts and toolboxes. I know I could just do it one by one and push it via left: -50% for expample but it would be cool when there´s a code to put it automatically to the left.

For expample mentioned text:

Geeignete Anzahl monatl. Besuche (ICON) --> Put tooltip at the beginning of the text when triggering it through the icon.

Here´s my code:

.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>

Thank you for your help!

Answer 1

Your parent div is acting as the relative container for the absolute positioned child div that holds the tooltip. So it's doing as expected showing over the icon. Include the text to contain the tooltip into the container and it will display as expected. After you change the top/left values to a valid 0 value. Except when you do that, now every hover is cancelled out by the tooltip panel showing over top of the icon which gives you a nasty flashing tooltip effect. So you need to separate the two so while user has mouse over the icon then the tooltip displays and vice versa. Here's to get you started. Cheers!

.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>