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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

<script>
        $("#allrecords").prepend('<div class="cursor"></div>');
    $("#allrecords").prepend('<div class="cursor-follower"></div>');
</script>

<style>
    @media only screen and (min-width : 320px) and (max-width : 480px) {
.cursor-follower,
.cursor{
      display: none;
}
</style>

<script>
            var cursor = $(".cursor"),
                follower = $(".cursor-follower");

            var posX = 0,
                posY = 0,
                mouseX = 0,
                mouseY = 0;

            TweenMax.to({}, 0.016, {
                repeat: -1,
                onRepeat: function() {
                    posX += (mouseX - posX) / 9;
                    posY += (mouseY - posY) / 9;

                    TweenMax.set(follower, {
                        css: {
                            left: posX - 20,
                            top: posY - 20
                        }
                    });

                    TweenMax.set(cursor, {
                        css: {
                            left: mouseX,
                            top: mouseY
                        }
                    });
                }
            });

            $(document).on("mousemove", function(e) {
                mouseX = e.pageX;
                mouseY = e.pageY;
            });

            $(".cursor-hover").on("mouseenter", function() {
                cursor.addClass(" active");
                follower.addClass(" active");
            });

            $(".cursor-hover").on("mouseleave", function() {
                cursor.removeClass(" active");
                follower.removeClass(" active");
            });
            
                        $(".cursor-hover-2").on("mouseenter", function() {
                cursor.addClass(" active-2");
                follower.addClass(" active-2");
            });

            $(".cursor-hover-2").on("mouseleave", function() {
                cursor.removeClass(" active-2");
                follower.removeClass(" active-2");
            });
        </script>

<style>

.cursor.active {
    opacity: 1;
    transform: scale(1);
}

.cursor.active::before {
    opacity: 1;
}

.cursor-follower {
    position: absolute;
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    z-index: 80;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: translate(4px, 4px);
     mix-blend-mode: difference;
}

.cursor-follower::before {
    z-index: 80;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 100%;
    opacity: 1;

}

/*Меняем путь до изображения при наведении - background-image*/

.cursor-follower.active {
    background-image: url("https://static.tildacdn.com/tild3439-6432-4930-b565-393834303031/drag2.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    opacity: 1;
    transform: scale(3);
    mix-blend-mode: normal;
}

.cursor-follower.active-2 {
    /*background-image: url("https://static.tildacdn.com/tild3533-3132-4531-b633-316639656364/Frame_147.svg");*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    opacity: 1;
    transform: scale(1.4);
    mix-blend-mode: difference;
}
</style>