How to extend Bootstrap 3 popover/tooltip with dynamic classes data-attr?

Question

How can I add the below hot fix outside of bootstrap core files?

This question has been posted before, and the hot fix does work like a charm. But it requires editing core files. here!

In the Tooltip.prototype.show function:

  $tip
    .detach()
    .css({ top: 0, left: 0, display: 'block' })
    .addClass(placement)

Adding the add-class below works likes a charm:

  .addClass(this.$element.attr("data-class"))

So now whenever you add data-class to the popover call, it will add the attribute to the <div class="popover"> div.

The down side is that you have to edit core files to achieve this. I'm only slightly versed it jQuery and this has racking my brain, but I think there must be a way to tack on that .addClass() as an extension to the Tooltip Prototype. Maybe using .extend()?

Answer 1

    !function($){   
        $.extend($.fn.tooltip.Constructor.DEFAULTS,{
            dataClass: false
        }); 
        var Tooltip = $.fn.tooltip.Constructor;
            _show = Tooltip.prototype.show;

        Tooltip.prototype.show = function (){
            _show.apply(this,Array.prototype.slice.apply(arguments));

            if (this.options.dataClass!=="undefined" && this.options.dataClass){
                var that = this;
                var $tip = this.tip();
                if (this.$element.attr("data-class") !== undefined)
                    $tip.addClass(this.$element.attr("data-class"));
            }
        };
    }(jQuery);