Search the Community

Здравствуйте Есть у меня такое <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 но оно тоже не работает Подскажите как решить проблему?