-1

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>

1 Resposta 1

0

Usando o pageX e pageY quando vc da scroll na tela ele continua pegando a distancia o mouse até o topo da div. Utilizando o clientX e clientY ele pega a distância correta.

$('[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>

4
  • Como vc resolveu o problema do travamento? E tem mais um problema. Desta forma que vc fez o title some quando fica no fim da página, queria saber se tem alguma forma de fazer ele alterar a posição de acordo com a página. Ou seja, se eu ir ate o fim da página ele fica encima do mouse, e se eu ir ate o topo da pagina ele desce. Commented 24/02/2016 às 19:50
  • 1
    Não estava travando, acontece que o top estava ficando muito grande e o tooltip ficava muito para baixo. No seu exemplo é só indo descendo aos poucos que da para ver ele indo muito mais abaixo por causa do top. Vou ver uma forma de melhorar isso. Commented 24/02/2016 às 19:52
  • ok fico aguardando sua resposta Commented 24/02/2016 às 20:06
  • amigo deu tempo de olhar o código? Commented 25/02/2016 às 12:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .