Как сделать поп ап при наведении на другой обьект?

Для создания поп-апа при наведении на другой объект вам понадобится использовать CSS и JavaScript. Вот шаги, которые помогут вам реализовать это:

Шаг 1: Создайте HTML-разметку для всплывающего окна. Определите его положение и стилизацию с помощью CSS. Например:

<div class="popup">
     <p>Это всплывающее окно</p>
</div>

.popup {
    display: none; /* Скрываем всплывающее окно по умолчанию */
    position: absolute; /* Задаем положение абсолютно */
    top: 0; /* Положение сверху */
    left: 0; /* Положение слева */
    background-color: #fff; /* Цвет фона */
    padding: 10px; /* Отступы вокруг содержимого всплывающего окна */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Тень вокруг всплывающего окна */
    z-index: 9999; /* Устанавливаем "z-index" наибольшее, чтобы всплывающее окно было наверху */
}

Шаг 2: Используйте CSS-селектор :hover, чтобы отобразить всплывающее окно при наведении на другой объект. Например, если вы хотите, чтобы при наведении на кнопку отображалось всплывающее окно, используйте следующий CSS-код:

.button:hover + .popup {
    display: block; /* Отображаем всплывающее окно при наведении на кнопку */
}

Здесь .button - это класс кнопки, а .popup - класс всплывающего окна. Знак плюса (+) в CSS селекторе означает выбрать следующий элемент после кнопки с классом .button.

Шаг 3: Добавьте JavaScript-код, чтобы скрыть всплывающее окно, когда пользователь щелкает вне его. Например:

window.addEventListener('click', function(event) {
    var popup = document.querySelector('.popup');
    if (!event.target.matches('.button') && !event.target.matches('.popup')) {
        popup.style.display = 'none'; /* Скрываем всплывающее окно, если клик был сделан не на кнопке и не внутри него */
    }
});

Этот код слушает клики на всем окне и определяет, был ли сделан клик на кнопке или в всплывающем окне. Если нет, то всплывающее окно скрывается.

Теперь при наведении на кнопку всплывает окно, и оно будет скрываться при клике вне него. Вы можете настроить стилизацию всплывающего окна и анимации, чтобы сделать его более привлекательным и интерактивным.