防止悬停卡超出页面范围

Question

所以我试图在类似Twitter的悬停上制作联系人卡片。当某人将鼠标悬停在联系人姓名上时，该卡就会出现。一切正常。但这超出了页面范围。 我需要的是根据位置上下显示。

这是我的代码

.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>

我尝试了很多方法，但没有找到确切的方法。那么我该如何实现呢？有帮助吗？