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;
}

相对于图标定位工具提示

1 个答案: