工具提示Bootstrap在圖標鏈接上的位置

我使用Bootstrap和Font-Awesome用於圖標，我正在嘗試在鏈接上添加工具提示，但工具提示無法在圖標鏈接上正確定位。工具提示Bootstrap在圖標鏈接上的位置

#html 

<div class="icon-head"> 
    <ul> 
     <li><a href="https://www.facebook.com/" data-original-title="Tooltip on top" data-placement="top" rel="tooltip" title=""><i class="icon-facebook"></i></a> 
     </li> 
    </ul> 
</div> 

#css 

.icon-head { 
    position:relative; 
    margin:0; 
    padding: 0; 
    text-align: center; 
} 
.icon-head i { 
    font-size: 28px; 
    margin-left: 15px; 
    display: inline-block; 
} 
.icon-head ul { 
    list-style: none outside none; 
    margin-left: 7%; 
    padding: 0; 
    text-align: center; 
} 
.icon-head a { 
    text-decoration: none; 
    display: block; 
    color: #34495e; 
    line-height: 30px; 
} 
.icon-head a:hover { 
    color: black; 
} 
.icon-head li { 
    background: none; 
    background-size: 0px; 
    cursor: pointer; 
    margin-top: 15px; 
    margin-bottom: 0px; 
    margin-right: 7px; 
    padding: 0px; 
    float: left; 
    display: inline; 
} 
.icon-head li:hover { 
    color: black; 
    background: none; 
    background-size: 0px; 
}

我想在圖標的中心頂部提示顯示。

好吧，我可以就這樣tooltip風格加margin修復：

.tooltip.top { 
    margin-top:-11px; 
    margin-left:7px; 
}

但是，它可以打破的位置等提示。

如何在不添加margin的情況下修復它們的樣式tooltip？

來源

2013-06-20 GeekToL

這是否有幫助：http://stackoverflow.com/a/11568129/1388017？ – dezman

在您的代碼中看到'
'後，我關閉了您的jsFiddle示例頁面。 –

@MilchePatern：哦，謝謝你告訴我 – GeekToL

解決

上.icon-head i刪除margin-left並添加margin-left: 12%;到.icon-head ul

感謝所有。

來源

2013-06-20 16:29:04 GeekToL

添加display:block;和一些填充到您的鏈接將使工具提示行爲更好，並更加一致。

jsFiddle

來源

2013-06-20 16:05:24 Stefan

我想在圖標的中心頂部顯示工具提示。您的解決方案不適合我。 – GeekToL

您的margin-left：15px;正在拋棄它，嘗試刪除它 – Stefan

工具提示Bootstrap在圖標鏈接上的位置

回答

相關問題