несколько div и всплывающая подсказка

[Andrij]

Здравствуйте

 

Есть у меня такое

<div class="pole1"><div id="divseed0" class="pole_img"><img id="seed0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=" onload="if(this.src=='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=')this.src=seed_src[0];" onclick="onClickSeed(event, this);"></img></div><div class="pole_name"><?php echo $pole1?></div><div class="pole_infox">1:<div class="info"><?php echo $pole1?></div><br><br>2:<div class="info"><?php echo $pole1;></div><br><br>3:<div class="info"><?php echo $pole1?></div><br><br>4:<div class="info">Да</div></div><div class="pole_infoxmore"></div></div>

ну и стили

.pole1{   position: absolute;   top: 10px;   left: 10px;   right: 0px;   bottom: 0px;   height: 105px;   width: 370px;   padding: 15px 15px 15px 15px;   margin: 0px auto 0px auto;     -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  overflow: hidden;  border: none;  -webkit-border-radius: 35px;  border-radius: 35px 0px 0px 35px;  font: normal 13px/1 "Courier New", Courier, monospace;  color: rgba(255,255,255,1);  text-align: justify;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;  background: #029bd8;  -webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;}.pole_name{   position: absolute;   top: 100px;   left: -270px;   right: 0px;   bottom: 0px;   height: 15px;   width: 75px;   padding: 5px 5px 5px 5px;   margin: 0px auto 0px auto;     -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  overflow: hidden;  border: none;  -webkit-border-radius: 35px;  border-radius: 0px 0px 0px 0px;  font: normal 13px/1 "Courier New", Courier, monospace;  color: rgba(255,255,255,1);  text-align: center;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;  background: #029bd8;  -webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;}.pole_infox{   position: absolute;   top: 15px;   left: 50px;   right: 0px;   bottom: 0px;   height: 90px;   width: 200px;   padding: 5px 5px 5px 5px;   margin: 0px auto 0px auto;     -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  overflow: hidden;  border: none;  -webkit-border-radius: 35px;  border-radius: 0px 0px 0px 0px;  font: normal 13px/1 "Courier New", Courier, monospace;  color: rgba(255,255,255,1);  text-align: justify;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;  background: #029bd8;  -webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;}.pole_infoxmore{   position: absolute;   top: 15px;   left: 340px;   right: 0px;   bottom: 0px;   height: 65px;   width: 30px;   padding: 5px 5px 5px 5px;   margin: 0px auto 0px auto;     -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  overflow: hidden;  border: none;  -webkit-border-radius: 35px;  border-radius: 0px 0px 0px 0px;  font: normal 13px/1 "Courier New", Courier, monospace;  color: rgba(255,255,255,1);  text-align: justify;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;  background: #029bd8;  -webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;}.pole_img{   position: absolute;   top: 10px;   left: -270px;   right: 0px;   bottom: 0px;   height: 85px;   width: 85px;   padding: 0px;   margin: 0px auto 0px auto;   -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  overflow: hidden;  border: none;  -webkit-border-radius: 35px;  border-radius: 0px 0px 0px 0px;  font: normal 13px/1 "Courier New", Courier, monospace;  color: rgba(255,255,255,1);  text-align: justify;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;  background: #029bd8;  -webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  box-shadow: 0 0 10px 4px rgba(0,0,0,0.3) ;  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;}

У меня есть один большой див в нем 4 дива и в одном есть дивы где надо сделать всплывающую подсказку

 

сделал я такой вариант

div.info:before {  content:attr(data-description);  box-sizing:border-box;  display:block;  background:rgba(0,0,0,.7);  color:white;  padding:20px;  position:absolute;  left:50%;  top:-30px;  ;  width:200px;  height:65px;  line-height:25px;  border-radius:5px;  opacity:0;  transition:.25s ease-in-out;}div.info:after {  content:'';  display:block;  position:absolute;  top:35px;  left:50%;  ;  height:0;  width:0;  border-left:8px solid transparent;  border-right:8px solid transparent;  border-top:8px solid rgba(0,0,0,.7);  transition:.25s ease-in-out;  opacity:0;}div.info:hover:before {  opacity:1;  top:-50px;}div.info:hover:after {  opacity:1;  top:15px;}

Но подсказку обрезает граница дива

 

Пробовал сделать z-index  но оно тоже не работает 

 

Подскажите как решить проблему? 

[satantx]

.pole_infox

В этом блоке убери overflow: hidden;