problems with Tooltip in jQuery and css

Question

problems with Tooltip in jQuery and css

Navigation

#1 by (1 votes)

1

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

They are presenting the standard Tooltip when you hover over it. This happens only in IE, Safari and old Chrome.

look at the error photo:

Cananyonehelpme?Followthecodebelow.

$(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><pclass="masterTooltip" title="bla,bla,bla,bla">qeqweqweqweqqw</td>

jquery css

asked by anonymous 14.09.2016 / 21:30

1 answer

How to return an object using the object name as a function parameter? Input problem with validation

score 1 · Accepted Answer

I did some tests simulating the older internet explorer, and I actually saw the problem, I made some changes to your code and this way this bug did not occur. I stopped manipulating the DOM element (inserting and removing p.tooltip), it already exits there with display none, and to hover just the fadeIn and in hoverout I used hide to disappear immediately.

At least my test stopped appearing this error.

*, 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 p which is 20px to the left, so it ended up entering this container and not firing the hover function 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><imgsrc="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!