Итак, я пытался создать карточку контакта на ховере, например в твиттере. Когда человек наведет курсор на имя контакта, появится карточка. Работает нормально. Но выходит за рамки страницы. Мне нужно показать его вверх и вниз в зависимости от позиции.
Это мой код
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
bottom: 40px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: 0;
bottom: -20px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #d9dcde transparent;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, 10px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message p {
text-align: left;
font-size: 13px;
margin: 0;
}
<div class = "popover__wrapper m-t-5">
<a>Arshad</a>
<div class = "push popover__content">
<div class = "row">
<div class = "col-sm-12 col-md-12 col-lg-12 no-padding">
<div class = "widget-item user ">
<div class = "tiles user-dp">
<div class = "tiles-body no-padding">
<img src = "../assets/img/profiles/arshad-small.jpg" alt = "">
<div class = "overlayer bottom-right fullwidth">
<div class = "overlayer-wrapper">
<div class = " p-l-20 p-r-20 p-b-20 p-t-20">
<div class = "text-center"> <a class = "hashtags"> Administrator </a> </div>
<div class = "clearfix"></div>
</div>
</div>
</div>
<br>
</div>
</div>
<div class = "tiles white ">
<div class = "tiles-body">
<div class = "row">
<div class = "user-comment-wrapper pull-left">
<div class = "comment">
<div class = "user-name text-black semi-bold">Full Name </div>
<div class = "preview-wrapper">Designer</div>
</div>
<div class = "clearfix"></div>
</div>
<div class = "clearfix"></div>
<div class = "p-l-15 p-r-20 popover__message">
<p>phone</p>
<p>Email</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Много способов перепробовал, точно не нашел. Так как мне этого добиться? Любая помощь?
Я обновил сообщение с помощью HTML. Спасибо