Bug in the system of title that I developed

Question

Bug in the system of title that I developed

Navigation

#1 by (0 votes)

-1

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

1st: When I put a very large title quandity on a page, it stops working, in the example I am posting I have created a lot of input. You may notice that in the former the title works, but in the latter it does not work anymore.

2nd: When I click on the 1st input the title some of the page, I wanted it to move and always be visible.

Well follow my code, thank you all at once.

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

javascript html jquery css

asked by anonymous 24.02.2016 / 13:28

1 answer

Why are my imports giving error? Doubt with sum of values in sql server 2008 [duplicate]

score 0 · Answer 1

Using the pageX and pageY when you scroll on the screen it continues to pick up the mouse to the top of the div. Using 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><inputname='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>