Question

我创建了一个简单的jQuery＆amp;基于CSS的工具提示，即使我相对于父锚链接元素进行了相对定位，也没有水平对齐。

如果我将工具提示的宽度设置为100px或其他东西它可以工作，但内容可能会扩展，所以我想避免定义宽度。

HTML代码

<div class="single-session-speakers">

<div class="single_session_speaker_thumb iva_tip">
<a href="#"><img alt="Anne-Marie" src="http://placehold.it/50x50">
<span class="ttip">Anne-Marie</span></a>
</div>

<div class="single_session_speaker_thumb iva_tip">
<a href="#"><img alt="Kristin Ellison" src="http://placehold.it/50x50">
<span class="ttip">Kristin</span></a>
</div>

<div class="single_session_speaker_thumb iva_tip">
<a href="#"><img alt="John McWade" src="http://placehold.it/50x50">
<span class="ttip">John McWade</span></a>
</div>

<div class="single_session_speaker_thumb iva_tip">
<a href="#"><img alt="Chris Converse" src="http://placehold.it/50x50">
<span class="ttip">Chris Converse Mark</span></a>
</div>

</div>

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

Answer 1

正如您所说，工具提示的宽度取决于内容。然后，您需要使用JS代码而不是CSS对齐它，如下所示：

// Getting position based on width of gray-box and tooltip
var left = (grayBoxWidth - tooltipWidth) / 2; 
// Setting calculated left-position to tooltip element
$(this).find('span.ttip').css('left', left).fadeIn();

请参阅 working JSFiddle

Answer 2

这种问题总是难以处理。我能做些什么来帮助建议这个令人敬畏的插件Qtip2。这有很多功能，您现在不需要担心问题。请查看演示here

jQuery工具提示没有水平对齐？

2 个答案: