javascript - 个人资料卡超出浏览器窗口

Question

我想实现像 twitter 中的迷你个人资料视图。当我们悬停一个用户的名字时，他的迷你个人资料视图就会出现。但我的问题是它超出了浏览器窗口。我需要根据视口调整它。它应该在窗口之外，它应该自动调整。

它是这样来的

我需要这样

这是代码

<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">[phone]</div>
               <div class="description">[e-mail]</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>

我想可能是javascript可以解决的。有什么帮助吗？

谢谢

标签： javascripthtmlcss