How to animate bootstrap popover while showing?

Question

I've created my custom bs popover and is working properly. I want to animate it while showing. How can I give my custom animation ? Code is very simple as shown below.

$("#userPopover").popover({
    trigger: "hover focus",
    delay: {show: 1000, hide: 400},
    placement: 'bottom',
    html: true,
    content: $(".tt-container").html(),
});

Answer 1

Starting from a similar question on hide (How to customize Twitter Bootstrap popover hide animation) you can extend Bootstrap to handle a show function, and inside it fire a custom animation.

Code:

(function () {

    var orig = $.fn.popover,
        proto = $.extend({}, $.fn.popover.Constructor.prototype);

    $.fn.popover = function (options) {
        return this.each(function () {
            orig.call($(this), options);
            if (typeof options.show == 'function') {
                $(this).data('bs.popover').show = function () {
                    options.show.call(this.$tip, this);
                    proto.show.call(this);
                };
            }
        });
    }

})();

Usage:

$("#userPopover").popover({
    trigger: "hover focus",
    delay: {
        show: 1000,
        hide: 400
    },
    placement: 'bottom',
    html: true,
    content: $(".tt-container").html(),
    show: function () {
        $(this).fadeIn('slow');
    }
});

Demo: http://jsfiddle.net/IrvinDominin/8uKA5/