Предотвращение выхода подсказки за пределы страницы

Итак, я пытался создать карточку контакта на ховере, например в твиттере. Когда человек наведет курсор на имя контакта, появится карточка. Работает нормально. Но выходит за рамки страницы. Мне нужно показать его вверх и вниз в зависимости от позиции.

Предотвращение выхода подсказки за пределы страницы

Это мой код

.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. Спасибо

Arshad 31.10.2018 11:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
59
0

Другие вопросы по теме