problems with Tooltip in jQuery and css

Question

Galera montei um sisteminha de Tooltip bem simples usando jQuery e css.

They’re introducing the standard Tooltip when you mouse over it. This only happens in old IE, Safari and Chrome.

Look at the photo of the error:

Can anyone help me? Follow the code below.

$(document).ready(function () {

    $('.masterTooltip').hover(function () {

        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
                .html(title)
                .appendTo('body')
                .fadeIn('fast');
    }, function () {

        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function (e) {

        // Get X Y coordinates
        var mousex = e.pageX + 20;
        var mousey = e.pageY + -25;
        $('.tooltip').css({top: mousey, left: mousex});
    });
});

.tooltip {
    display:none;
    position:absolute;
    border:1px solid #616161;
    background-color:#323232;
    border-radius: 4px;
    padding:10px;
    color:#FFFFFF;
}
.tooltip::after{    
    position: absolute;
    content: '';
    left: -20px;
    top: 3px;
    border: 10px solid transparent;
    border-right-color: #323232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <p class="masterTooltip" title="bla,bla,bla,bla">qeqweqweqweqqw</td>

Answer 1

I did some tests simulating the older internet explorer, and I really saw the problem, I made some changes to its code and this way did not occur this bug. I stopped manipulating the DOM element (inserting and removing p.tooltip), it already exists there with None display, and at Hover just give the fadein and in hoverout I used the Hide to disappear immediately.

At least in my tests this error stopped appearing.

*OBS, I changed the value of var mousex = e.pageX + 20; para var mousex = e.pageX + 25;, because with the value 20, when moving the mouse to the right, the tooltip kept blinking, probably because it was very close to the after do p which is 20px left, so he ended up entering this container and not firing the function Hover in masterTooltip.

$(document).ready(function () {

    $('.masterTooltip').hover(function () {

        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('.tooltip').html(title).fadeIn('fast');
    }, function () {
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').hide();
    }).mousemove(function (e) {

        // Get X Y coordinates
        var mousex = e.pageX + 30;
        var mousey = e.pageY + -25;
        $('.tooltip').css({top: mousey, left: mousex});
    });
});

.tooltip {
    display:none;
    position:absolute;
    border:1px solid #616161;
    background-color:#323232;
    border-radius: 4px;
    padding:10px;
    color:#FFFFFF;
}
.tooltip::after{    
    position: absolute;
    content: '';
    left: -20px;
    top: 3px;
    border: 10px solid transparent;
    border-right-color: #323232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://unsplash.it/200/300/?random" class="masterTooltip" title="Teste Com Imagem"/>
<p class="masterTooltip" title="Teste com Texto">Teste com Texto</p>
<p class="tooltip"></p>

I hope it helps!