将工具提示定位到 div 的 left/beginning

Question

我是新来的，这是我的第一个问题。 :)

我试图在 div 的开头显示工具提示。目前，它显示在触发它的图标下方。在该图标之前是文本。我很想把它放在文本的开头。它将是一个包含文本和工具箱的列表。我知道我可以一个接一个地把它推到左边：-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 的相对容器。所以它按预期显示在图标上。将包含工具提示的文本包含到容器中，它将按预期显示。在将 top/left 值更改为有效的 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>

将工具提示定位到 div 的 left/beginning

Positioning the tooltip to the left/beginning of the div

html

positioning

tooltip