jQuery tooltip non allineato orizzontalmente?

Question

Ho creato un semplice jQuery & tooltip basato su CSS che non è allineato orizzontalmente anche se ho reso il posizionamento relativo per l'elemento link anchor padre.

Se ho impostato la larghezza del suggerimento su 100px o qualcos'altro, funziona ma il contenuto potrebbe estendersi, quindi voglio evitare di definire la larghezza.

codice 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 codice

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

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

Quello che sto facendo wron g? Per favore mi faccia sapere. Ecco il JSFiddle

Answer 1

Come hai detto, la larghezza del tooltip dipende dal contenuto. Poi sarà necessario allineare utilizzando JS codice anziché CSS come segue:

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

Vai a questa working JSFiddle

Answer 2

Questo genere di problemi è sempre difficile da gestire. Quello che potrei fare per aiutare è raccomandare questo fantastico plugin Qtip2. Questo ha molte caratteristiche e non devi preoccuparti di cose come il tuo problema ora. Dai uno sguardo alle demo here