将工具提示定位在div的左侧/开头

Question

我是新来的，这是我的第一个问题。：(

我试图在div的开头显示一个工具提示。现在，它显示在触发它的图标下面。在那个图标之前是文本。我很想把它放在正文的开头。它将是一个包含文本和工具箱的列表。我知道我可以一个接一个地做，然后向左推：50%用于expample，但当有代码自动将其放在左边时，这会很酷。

对于示例提到的文本：

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>