Chú giải công cụ jQuery không được căn chỉnh theo chiều ngang?

Question

Tôi đã tạo một chú giải công cụ dựa trên CSS & CSS đơn giản không được căn chỉnh theo chiều ngang mặc dù tôi đã định vị tương đối cho phần tử liên kết neo mẹ.

Nếu tôi đặt chiều rộng của chú giải công cụ thành 100px hoặc cái gì khác nó hoạt động nhưng nội dung có thể mở rộng vì vậy tôi muốn tránh xác định chiều rộng.

Mã 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 Mã

$('.iva_tip').hover(function() { 
    $(this).find('span.ttip').fadeIn(); 
}, function() { 
    $(this).find('span.ttip').fadeOut(); 
}); 

CSS Mã

.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; 
} 

Những gì tôi đang làm wron g? Làm ơn cho tôi biết. Dưới đây là JSFiddle

Answer 1

Như bạn đã nói, chiều rộng của tooltip phụ thuộc vào nội dung. Sau đó, bạn sẽ cần phải sắp xếp nó bằng cách sử JS mã thay vì CSS như sau:

// 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(); 

Xem này working JSFiddle

Answer 2

Loại sự cố này là cần thiết để xử lý. Những gì tôi có thể làm để giúp đỡ là đề nghị plugin này awasome Qtip2. Điều này có rất nhiều tính năng và bạn không cần phải lo lắng về những thứ như vấn đề của bạn ngay bây giờ. Hãy xem bản trình diễn here