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