时间戳

首页 > 解决方案 > 将工具提示定位到 div 的左侧/开头

html - 将工具提示定位到 div 的左侧/开头

问题描述

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

我试图在 div 的开头显示一个工具提示。目前，它显示在触发它的图标下方。在该图标之前是文本。我很想把它放在正文的开头。它将是一个带有文本和工具箱的列表。我知道我可以一个一个地做，然后通过左推：例如-50%，但是当有代码自动把它放在左边时会很酷。

例如提到的文本：

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

感谢您的帮助！

标签： htmltooltippositioning

解决方案

您的父 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>

推荐阅读