Desenvolvi um sistema de title usando jQuery e CSS, ele é muito bom e funciona quando chamo a tag <title>
. Porém estou enfrentando 2 bugs que não estou conseguindo resolver.
1º: quando coloco uma quandidade muito grande de title em uma pagina, ele para de funcionar, no exemplo que estou postando eu criei um monte de input. Podem perceber que nos primeiros o title funciona, porém nos últimos ele não funciona mais.
2º: quando clico no 1º input o title some da página, queria que ele se movesse e ficasse sempre visível.
Bom segue o meu código, desde já agradeço a todos.
$('[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>