3

I would like to implement my own popover hide animation. Currently, I am modifying bootstrap.js directly.

$.fn.popover = function (option) {
            return this.each(function () {
                var $this = $(this)
                  , data = $this.data('popover')
                  , options = typeof option == 'object' && option
                if (!data) $this.data('popover', (data = new Popover(this, options)))

                //original code
                // if (typeof option == 'string') data[option]()
                //custom code
                if (typeof option == 'string') {
                    if (option === 'hide') {
                        //my customize animation here
                    }
                    else {
                        data[option]();
                    }

                }

            })
        }

I would like to know if there are anyway so I can achieve a dynamic animation when I init the popover

$('#target').popover({
    hide: function () {
        //my own animation
    }
});
franchez
  • 567
  • 1
  • 7
  • 20
Kuroro
  • 1,841
  • 1
  • 19
  • 32

1 Answers1

9

Nice question-brain-teaser! You can definitely do it. Take a look how you can extend plugin without messing with original source code:

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

Here we go! We extended default popover functionality with our own. Now lets use it:

$('.three').popover({
  placement: 'bottom',
  hide: function() {
    $(this).animate({marginTop: -100}, function() {
      $(this).css({marginTop: ''});
    });
  }
});

Above popover will have custom animation effect while hiding.

Of course if you don't provide hide option you will have default behavior.

Demo: http://jsfiddle.net/VHDwa/71/

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • 1
    Hello @dfsq, Can you provide the code to animate while showing popup, I've tried myself but got the error in console "Uncaught TypeError: Cannot read property 'prototype' of undefined.". Also for the first time, it did not animate. The video link is : http://youtu.be/DGJ7BPubVgo Thanks in anticipation. – Dharmraj Jul 29 '14 at 11:38
  • I've sent you my piece of code in your web contact me form – Dharmraj Jul 29 '14 at 11:42