0

Web アイコンに 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();
    });
});
4

1 に答える 1

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

また、js をドロップし、CSS を使用してマウスオーバーで表示することができます。

#footer li:hover .tooltip{
    display:block;
}
于 2013-02-09T19:31:24.483 に答える