我正在使用 Bootstrap 和 Font-Awesome 作为图标，我正在尝试在链接上向它们添加工具提示，但工具提示无法在带有图标的链接上正确定位。
#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;
}
我希望在图标的中心顶部显示工具提示。
好的，我可以通过添加margin以下样式来修复tooltip：
.tooltip.top {
margin-top:-11px;
margin-left:7px;
}
但是，它可以打破其他工具提示的位置。
如何在不添加margin样式的情况下修复它们tooltip？