Подсказки при наведении

<!--Подсказки при наведении-->
<!--https://mt-webdesign.ru/hover-hints-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<div class='help-pop' style="position: fixed; left: 0; top: 0;"></div>
<script>
// Указываем разрешение для запуска скрипта (1024px)
if (window.innerWidth > 1200) {
// Скрываем объекты в курсоре
$('.uc-help-pop-1').addClass("help-pop-none");
$('.uc-help-pop-2').addClass("help-pop-none");
// Добавляем объекты в курсор
$('.uc-help-pop-1').appendTo(".help-pop");
$('.uc-help-pop-2').appendTo(".help-pop");
// Выводим подсказку 1
$("body").on("mouseover mouseout", '.help-pop-up-1', function(){
$('.help-pop').toggleClass("help-animation");
$('.uc-help-pop-1').removeClass("help-pop-none");
$('.uc-help-pop-2').addClass("help-pop-none");
});
// Выводим подсказку 2
$("body").on("mouseover mouseout", '.help-pop-up-2', function(){
$('.help-pop').toggleClass("help-animation");
$('.uc-help-pop-2').removeClass("help-pop-none");
$('.uc-help-pop-1').addClass("help-pop-none");
});
};
</script>
<style>
@media screen and (min-width: 1200px) {
.help-pop-none {
display: none !important;
}
.help-pop {
transform: translate(-45%, -45%) scale(0);
transition-duration: 300ms;
transition-timing-function: ease-out;
pointer-events:none;
opacity:0;
width: 100%;
height: 100%;
z-index: 999;
}
.help-animation {
transform: translate(-45%, -45%) scale(0.07) !important;
transform: scale(0.3);
transition-duration: 300ms;
transition-timing-function: ease-out;
opacity:1;
}
}
</style>
<script>
// Указываем разрешение для запуска скрипта (1024px)
if (window.innerWidth > 1200) {
var object = document.querySelector('.help-pop');
document.addEventListener("mousemove", function(event) {
var x = event.clientX;
var y = event.clientY;
gsap.to(object, {
duration: 0.5,
left: x,
top: y,
ease: "power2.out"
});
});
};
</script>