jQuery подсказка не выровнена по горизонтали?

Я создал простую jQuery & CSS-ориентированную подсказку, которая не выровнена по горизонтали, хотя я сделал позиционирование относительным для элемента привязки родительского элемента.jQuery подсказка не выровнена по горизонтали?

Если я устанавливаю ширину всплывающей подсказки на 100 пикселей или что-то еще, она работает, но содержимое может расширяться, поэтому я хочу избежать определения ширины.

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

Что я делаю wron г? Пожалуйста, дайте мне знать. Вот JSFiddle

источник

2016-01-28 Maqk

вы имели в виду «выравнивание по вертикали»? –

В вопросе названия я спросил о горизонтальном не вертикальном. В настоящее время у меня есть вертикальное положение. – Maqk

Вы имеете в виду выровнять всплывающую подсказку относительно серого окна следующим образом? https://jsfiddle.net/bw6hbrq9/4/ –

Как вы сказали, ширина всплывающей подсказки зависит от содержимого. Затем вам нужно будет выровнять его с помощью 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

источник

2016-01-28 23:13:00

Не понял, что ширина всплывающей подсказки зависит от содержимого. Спасибо за результат @ leo.fccx, оцените вашу помощь. – Maqk

Этот тип проблем всегда обрабатывается. Что я могу сделать, чтобы помочь, рекомендую этот awasome плагин Qtip2. У этого есть много особенностей, и вам не нужно беспокоиться о таких вещах, как ваша проблема. Взгляните на демонстрации here

источник

2016-01-28 22:48:58 Sandcar

Я не спрашивал, какой плагин использовать или рекомендовать. Кстати, плагин, который вы рекомендовали, имеет размер 45 КБ. – Maqk

jQuery подсказка не выровнена по горизонтали?

ответ

Смежные вопросы