CSS Реплики: Как обновить положение наконечника на основе того, где пузырь

Question

http://jsfiddle.net/9ZtK2/

У меня есть значок изображения и выноски рядом с ним, чтобы сделать его похожим она разговаривает. Положение наконечника находится слева.

.text_bubble_right { 
width:300px; 
height:100px; 
background-color:#00FFFF; 
border-radius:15px; 
padding:5px 0 0 5px; 
margin-left:20px; 
position:relative; 
display:inline-block; 
vertical-align:top; 
} 

.text_bubble_right:after { 
content:""; 
width:0; 
height:0; 
border-top:10px solid transparent; 
border-bottom:10px solid transparent; 
border-right:20px solid #00FFFF; 
position:absolute; 
top:15px; 
right:100%; 
} 

Всякий раз, когда ширина окна достаточно маленькая, пузырь будет двигаться ниже значка. Однако наконечник все еще находится слева. Я хочу обновить позицию подсказки в зависимости от того, где находится пузырь.

Я знаю, JQuery не будет иметь возможности манипулировать :before и :after псевдо-классы, поэтому я планирую просто создать дополнительный класс, который я просто добавить на и удалить старый класс для обновления положения.

Предполагая, что это сработает, есть ли способ проверить местоположение пузыря (будь то справа или ниже значка) с помощью jQuery? Кроме того, был бы способ проверить и убедиться, что наконечник находится в правильном положении после того, как страница заканчивает загрузку (в противном случае пузырь может быть ниже значка, но наконечник может по-прежнему находиться слева)?

Answer 1

Ну, идея о том, как играть с классами с помощью JQuery:

http://jsfiddle.net/coma/G5CeM/

var body = $('body').on('mouseover', '[data-tip]', function(event) { 

    var self = $(this).removeClass('right'); 
    var x = self.offset().left + self.width()/2; 

    if (x < body.width()/2) { 

     self.addClass('right'); 
    } 
}); 

Answer 2

Изменение положения пузырька

.text_bubble_right { 
    width:300px; 
    height:100px; 
    background-color:#00FFFF; 
    border-radius:15px; 
    padding:5px 0 0 5px; 
    margin-left:20px; 
    position:relative;// Position change 
    display:inline-block; 
    vertical-align:top; 
} 

К

.text_bubble_right { 
    width:300px; 
    height:100px; 
    background-color:#00FFFF; 
    border-radius:15px; 
    padding:5px 0 0 5px; 
    margin-left:20px; 
    position:absolute;// Position change 
    display:inline-block; 
    vertical-align:top; 
}