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

@IrvinDomininakaEdward : Hello, I've put the code in question. Thanks — Dharmraj, Jul 29 '14 at 09:08
@IrvinDomininakaEdward : Hello Irvin, as per your answer, I've put the code and it was very useful, the only issue is, for the first time it doesn't animate and everytime while i hover for popover, it gives me error in console. Kindly look at the video: http://youtu.be/DGJ7BPubVgo . Thanks :) — Dharmraj, Jul 29 '14 at 11:20
@IrvinDomininakaEdward : I'm using bootstrap v3.2.0. I've modified the fiddle: http://jsfiddle.net/8uKA5/5/ , the first part of code is to prevent hiding popover while mouse is over it. I've took the reference of http://jsfiddle.net/Zf3m7/463/ for the first part of code. Can you help me out finding my mistake ?The edited fiddle is having the same problem I'm facing and giving same error on console. — Dharmraj, Jul 29 '14 at 12:26
Thanks a lot dear, The only problem left it does not animate the popover for the first time. Can you help me on this please? — Dharmraj, Jul 29 '14 at 13:24

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

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/

edited May 23 '17 at 12:33

Community

1
1

answered Jul 29 '14 at 10:00

Irvin Dominin

30,819
9
77
111

`Tooltip.prototype.show` already exists, the bootstrap prototyping above is completely waste of time. Proof here -> **http://jsfiddle.net/cjXGE/3/** basically, just use the native `show` , but I have the feeling that OP not just want a hide effect, but something different? – davidkonrad Jul 29 '14 at 10:26
@davidkonrad nope, in your case the function is not fired – Irvin Dominin Jul 29 '14 at 12:44
@davidkonrad : Irvin is right here. native show/hide aren't fired. – Dharmraj Jul 29 '14 at 12:57
@Dharmraj I'll take a look asap at the first animation that isn't fired – Irvin Dominin Jul 29 '14 at 13:28
@IrvinDomininakaEdward : That's very kind of you. You really helped me a lot :) Kindly inform me with a solution if you get the one :) Thanks again. – Dharmraj Jul 29 '14 at 13:31
@IrvinDomininakaEdward : Heya, the reason might be line #28 of javascript in the fiddle http://jsfiddle.net/IrvinDominin/8uKA5/6/ , that calls original bootstrap with options. Can you give me a workaround ? Thanks. – Dharmraj Jul 30 '14 at 05:29
@Dharmraj seems because first time in the show function this refers to window and not to the popover element...strange! – Irvin Dominin Jul 30 '14 at 11:10

How to animate bootstrap popover while showing?

1 Answers1