Question

我正在创建工具提示。我的问题是，出现工具提示时，兄弟姐妹会移动，与position: absolute不同。我不能使用绝对位置，因为它会相对于浏览器窗口定位工具提示，而不是原始位置。

HTML

<p class="tooltip-anchor">Hover me</p>
<span class="tooltip">Hello!</span>

CSS

.tooltip-anchor:hover + .tooltip {
    display: inline-block;
}

.tooltip {
    display: none;
    position: relative;
    color: #fff;
    background: #333;
    padding: 0.25em;
}

我在密码笔上做了demo。

Answer 1

在代码中添加一些模式，您可以获得想要的东西。如果将跨度插入到p标签中，则可以为跨度（相对于其容器的位置）设置position：absolute，然后根据需要修改其位置。

绝对位置：从常规文档中删除该元素流程，并且不会为页面布局中的元素创建空间。它相对于其最接近的祖先的位置（如果有）；否则，它相对于初始包含块放置。它的最终位置由上，右，下和上的值确定左。

<p style="font-size: 17px;">A simple tooltip. CSS is wonderful, may I say.</p>

<p class="tooltip-anchor">Hover me <span class="tooltip">Hello!</span></p>

<p>Hello</p>

CSS

body {
    font-family: sans-serif;
    font-size: 18px;
    text-align: center;
}

.tooltip-anchor{position:relative;display:inline-block;}/* modified */

.tooltip-anchor:hover  .tooltip {
    display: inline-block;
}

.tooltip {
    display: none;
    position: absolute;
    bottom: 20px;/* modified */
    left:-40px;/* modify for center */
    color: #fff;
    background: #333;
    padding: 0.25em;
    min-width: 150px;
    text-align: center;
}

位置：相对但兄弟姐妹认为该元素不存在

1 个答案: