Question

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();
});
    });

Answer 1

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