0

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.

it is coming this way it is coming this way

I need it this way

enter image description here

here is the code

<div class="popover__wrapper">
    <a>Cyril</a>
    <div class="push popover__content">
        <div class="contact-card-user">
            <div class="left-side">
                <img src="../assets/img/profiles/male-user.jpg" alt="">
            </div>
           <div class="right-side">

           <div class="details-wrapper">
               <h3>Full Name </h3>
               <div class="privilege">Administrator</div>
               <div class="designation">Designer</div>
               <div class="description">+973 1234 5678</div>
               <div class="description">info@company.com</div>
           </div>
       </div>
    </div>
</div>

<style>
.popover__wrapper {
    position: relative;
    margin-top: 0;
    display: block;
    cursor: pointer;
}
.popover__content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 40px;
    bottom: -90px;
    transform: translate(0, 30px);
    background-color: transparent;
    padding: 0;
    width: auto;
}
.popover__content:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: -20px;
    bottom: 100px;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color: transparent transparent transparent #a5053d;
    transition-duration: 0.3s;
    transition-property: transform;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.contact-card-user {
    background: #fff;
    display: flex;
    width: max-content;
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
    margin-right: 20px;
    width: 100%;
    max-width: 200px;
}
.contact-card-user .left-side img {
    width: 100%;
    height: auto;
}
.contact-card-user .right-side {
    padding-left: 3px;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-right: 25px;
    width: 100%;
    max-width: 260px;
}
.contact-card-user .details-wrapper {
    text-align: left;
}
.contact-card-user .details-wrapper h3 {
    color: #333;
    font-size: 16px;
    white-space: pre-wrap;
    overflow: hidden;
    margin-bottom: 1px;
    line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
    display: inline-block;
    color: #a5053c;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.7px;
    margin-bottom: 13px;
    margin-top: 6px;
    border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
    color: #333;
    margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
    color: #9a9a9a;
    font-size: 12px;
    line-height: 17px;
}
.contact-card-user .details-wrapper .description {
    color: #9a9a9a;
    font-size: 12px;
    line-height: 17px;
}

</style>

I think may be javascript can solve. Any help?

Thank you

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
Arshad Arsal
  • 64
  • 7
  • Yes, javascript can surely solve this, what have you tried? – Roope Dec 02 '18 at 11:01
  • I'm actually not good in javascript. Here is the working fiddle https://jsfiddle.net/arshadarsal/vo4y70am/ – Arshad Arsal Dec 02 '18 at 11:04
  • Have you checked the related questions in SO? There's probably plenty of them. E.g. https://stackoverflow.com/questions/8897289/how-to-check-if-an-element-is-off-screen – Roope Dec 02 '18 at 11:15
  • Does this have to be like this .popover__content { opacity: 0; visibility: hidden; position: absolute; left: 40px; bottom: -90px; transform: translate(0, 30px); background-color: transparent; padding: 0; width: auto; } – ptts Dec 02 '18 at 11:21
  • It is spilling over on top as well.You could just translate it out of view 100% and then set translate value to 0 on hover and that would work on all devices/screens. But it all depends is this the finished website or just a component – ptts Dec 02 '18 at 11:22
  • Can we adjust it with javascript? Just like bootstrap tooltip? Automatically position top left bottom right? – Arshad Arsal Dec 02 '18 at 11:30
  • can anyone give me a javascript example working on my code? – Arshad Arsal Dec 02 '18 at 12:50

0 Answers0