css hover div position auto left and right - html

Question

I am trying to make a hover open div with css. I created it but i have one question about hover position left and right.
First of all sorry for my english.
I created this DEMO from Codepen.
My question is: If you check my demo page you see information and location icon. When you hover over information or location icon then you see bubble div. in the upper left corner of the nice parts. but if you hover over information or location on the right side then you see bubble carry out.
I don't want to carry out bubble. I want to make a bubble stay in main div inside. What should i do for this ? Anyone can help me here ?
Here is my HTML code:
<div class="ssss">
<div class="s_u_a">
<div class="user_p_c_p">
<img src="1.jpg">
</div>
<div class="user_p_p_p">
<img src="2.jpg">
</div>
<div class="u_l_inf">
<div class="u_l_"><div class="uynott">test</div></div>
<div class="u_inf_"><div class="uynott2">test</div></div>
</div>
<div class="u_p_n_">test</div>
<div class="u_p_n_s">test</div>
</div>
</div>
in this html code main div is .sss
and this is my css code for bubble:
.u_l_:hover .uynott {
position:relative;
opacity:1;
visibility:visible;
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
-moz-transition: opacity .5s linear .5s;
-ms-transition: opacity .5s linear .5s;
}
.uynott
{
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
position: relative;
width: 295px;
height: auto;
padding: 10px;
background-color:#5890ff;
color:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #5890ff solid 1px;
visibility:hidden;
line-height: 21px;
margin-left: -25px;
opacity:0;
margin-top:25px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
z-index:5;
}
.uynott:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 20px;
}
.uynott:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 20px;
}
.u_inf_:hover .uynott2 {
position:relative;
opacity:1;
visibility:visible;
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
-moz-transition: opacity .5s linear .5s;
-ms-transition: opacity .5s linear .5s;
}
.uynott2
{
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
position: relative;
width: 295px;
height: auto;
padding: 10px;
background-color:#5890ff;
color:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #5890ff solid 1px;
visibility:hidden;
line-height: 21px;
margin-left: -115px;
opacity:0;
margin-top:25px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
z-index:5;
}
.uynott2:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 115px;
}
.uynott2:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 115px;
}

Answer 1

TBH... you just have to make another class for your divs at the right and move the div hidden before hover.
here you have your code working: http://codepen.io/anon/pen/bDrwk
code
Just have a look at the changes I made and you will easily see what you had to do. won't copy all the code as it will be as long as yours (even longer) and a bit confusing I move also the little arrow of your bubble.

Answer 2

Just remove width:295px from the class .uynott2 and check the output!!