Title system bug I developed

Question

I developed a title system using jQuery and CSS, it is very good and works when I call the tag <title>. But I am facing 2 bugs that I am not able to solve.

first: When I put a very large amount of title on a page, it stops working, in the example I’m posting I created a lot of input. You can see that at first the title works, but at last it doesn’t work anymore.

2nd: when I click on the first input the title leaves the page, I wanted it to move and always be visible.

Good follows my code, already I thank all.

$('[title]').hover(function () {
    // Hover over code
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<div class="tooltip"></div>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
}, function () {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
}).mousemove(function (e) {
    var mousex = e.pageX + -50; //Get X coordinates
    var mousey = e.pageY + -60; //Get Y coordinates
    $('.tooltip')
            .css({top: mousey, left: mousex});
});

.tooltip { 
    display:none;
    position:fixed;
    background-color:#484848;
    border-radius:2px;
    padding:10px;
    color:#ffffff;
    z-index:9999;
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>

Answer 1

Using pageX and pageY when vc scroll on the screen he keeps picking the distance the mouse to the top of the div. Using the clientX and clientY it takes the correct distance.

$('[title]').hover(function () {
    // Hover over code
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<div class="tooltip"></div>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
}, function () {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
}).mousemove(function (e) {
    
    var mousex = e.clientX + 10; //Get X coordinates
    
    var mousey = e.clientY; //Get Y coordinates    
    console.log(mousex, mousey);
    $('.tooltip')
            .css({top: mousey, left: mousex});
});

.tooltip { 
    display:none;
    position:fixed;
    background-color:#484848;
    border-radius:2px;
    padding:10px;
    color:#ffffff;
    z-index:9999;
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>
<input name='nome' title="Teste do title"><br>