我创建了一个简单的jQuery&基于CSS的工具提示,即使我为父锚链接元素做了相对定位,也没有水平对齐.
如果我将工具提示的宽度设置为100px或其他东西它可以工作,但内容可能会扩展,所以我想避免定义宽度.
jQuery代码
$('.iva_tip').hover(function () {
$(this).find('span.ttip').fadeIn();
},function () {
$(this).find('span.ttip').fadeOut();
});
CSS代码
.single_session_speaker_thumb {
position: relative;
display: inline-block;
text-align: center;
margin: 0 4% 4% 0;
}
.single_session_speaker_thumb a { display: block;}
.ttip {
display: none;
position: absolute;
bottom: 115%;
left: -50%;
padding: 0.5em 1em;
font-size: 13px;
line-height: 15px;
margin-left: 6px;
white-space: nowrap;
background: #22222b;
color: #d1d1de;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.ttip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-top-color: inherit;
border-top: 6px solid #333333;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
我做错了什么？请告诉我.这是JSFiddle
最佳答案
