JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <input type='text' class='hasTooltip' title='first tooltip'>
</body>

JavaScript

$(document).on('mouseover', '.hasTooltip', function(){
                // Hover over code
                console.log('test');
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="u-tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('fast');
            },function() {
                    // Hover out code
                    $(this).attr('title', $(this).data('tipText'));
                    $('.u-tooltip').remove();
            	})
            .on('mousemove', function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.u-tooltip')
                .css({ top: mousey, left: mousex })
        	});
          
setTimeout(function () {
    $("body").append("<p class='hasTooltip' title='second tooltip'>test</p>");
}, 1000);