css - 相对于图标定位工具提示

Question

我正在为我的网络图标使用 Font-Awesome，并且我正在尝试向它们添加工具提示。我无法正确定位，因此在悬停时，它在显示时不会移动图标。标签是 [Twitter] 指示实现图标的方式。

这是我的代码：

<ul>
    <li>
        <div class="tooltip">like me.</div>
        <i class="icon-facebook-sign"></i>
    </li>
[...]

---

#footer li {
    display:inline; 
    margin:0px 5%;
}
    #footer i {
        position:relative;
        font-size:74px;
    }
    #footer i:hover {
        color:#3b8edb;
        cursor:pointer;
    }
.tooltip {
    display:none;
    position: relative;
    background: #ffffff;
    font-size:12px;
    color:#2c6ca8;
    border-radius:5px;
    padding:10px;
}
.tooltip:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.tooltip:after {
    border-top-color: #ffffff;
    border-width: 12px;
    left: 50%;
    margin-left: -12px;
}

---

$(function() {
    $("#footer li i").mouseenter(function() {
        $(this.parent()).find(".tooltip").toggle();
    }).mouseleave(function() {
        $(this.parent()).find(".tooltip").toggle();
    });
});

Answer 1

.tooltip {
    position: absolute;  /* <- not relative */
    top: 10px;           /* <- position relative to #footer li */
    left: 10px;
}

您可以删除 js 并使用 CSS 在鼠标悬停时显示它：

#footer li:hover .tooltip{
    display:block;
}