2

我有一个自定义 CSS 工具提示，当它出现时，它会将其他内容向下推。我知道我需要添加position: absolute以使其正常工作，但我似乎无法弄清楚在哪里......

HTML：

<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>
<p>Fluff</p>

    <div class="outer">

    <a class="tippy" href="">
        ICON<img src="" class="icon"/>
    </a>

    <div class="tooltip">
        STUFF<br/>
        STUFF<br/>
        STUFF<br/>
        STUFF<br/>
        STUFF<br/>
    </div>

    </div><!-- Container -->

<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>
<p>FluffFluffFluffFluffFluffFluffFluffFluffFluff</p>

CSS：

.outer {
    width: 350px;
}

.tippy {
    text-decoration: none;
}

a.tippy:hover + div {
    display:block;
    float: right;
}

.tooltip {
    margin-left: 5px;
    margin-top: -15px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
    display: none;
}
.tooltip:after, .tooltip:before {
    border: solid transparent;
    content:' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}
.tooltip:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}
.tooltip:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}

小提琴：

4

1 回答 1

1

您需要在CSS 块中更改position:relative为。position:absolute.tooltip

由于此更改，您还需要修改 CSS 以定位工具提示。

如果您修改.outer为具有position:relative这就像设置.tooltip一样简单

left:55px;
top:-15px;

生成的 CSS（仅显示已更改的块）：

.outer {
    width: 350px;
    position:relative;
}
.tooltip {
    left: 55px;
    top: -15px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: absolute;
    border: 2px solid #333;
    display: none;
}

最后是一个 jsFiddle展示它的实际效果。

于 2013-09-24T22:25:23.870 回答