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

TO

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