CSS Speech bubbles: How to update the tip position based on where the bubble is

Question

http://jsfiddle.net/9ZtK2/

I have a picture icon and a speech bubble next to it to make it look like it is talking. The tip position is on the left.

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

Whenever the window's width is small enough, the bubble will move below the icon. However, the tip is still on the left. I want to update the tip's position based on where the bubble is located at.

I know jQuery will not be able to manipulate :before and :after pseudo-classes so I plan to just create an extra class which I will just add on and remove the older class to update the position.

Assuming that will work, is there any way I could check the bubble's location (whether it's on the right or below the icon) with jQuery? Also, would there be a way to check and make sure the tip is on the correct position once the page finishes loading (otherwise, the bubble can be below the icon but the tip may still be on the left)?

Answer 1

Well, just an idea on how to play with classes using 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

Change position of bubble

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