CODEWITHSUNDEEP
jquery
user1145334
user1145334

Reputation: 69

Apply fadein effect to tooltip?

I have this code, which shows the tooltip within a box with the id of "tooltip-container" - currently it just pops in...how can I make it fade nicely and fade out on roll-off?

Current code:

$(document).ready(function(){
    $('.tippytrip').hover(function(){
    var offset = $(this).offset();
    console.log(offset)
    var width = $(this).outerWidth();
    var tooltipId = $(this).attr("rel");
        $('#tooltip-container').empty().load('tooltips.html ' + tooltipId).show();
        $('#tooltip-container').css({top:offset.top, left:offset.left + width + 10}).show();
    }, function(){
        $('#tooltip-container').hide();
});
    });

Upvotes: 0

Views: 850

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

You can just add a time period in your show() and hide() methods...

.show(1000); // takes 1 second to fade in
.hide(1000); // takes 1 second to fade out

Upvotes: 1

Teun Pronk
Teun Pronk

Reputation: 1399

instead of .show() use .fadeIn(timeInMS) Same for .fadeOut()

Upvotes: 1

Related Questions