Callback function after tooltip / popover is created with twitter bootstrap?

问题

I want to manipulate a tooltip or popover after it is created with twitter bootstrap. As far as i know there isn't a build in way to do this.

$('#selector').popover({
  placement: 'bottom'
});

For example lets say i want to move the created tooltip up 5px and left 5px from it's calculated location. Any ideas on the best way to do this?

This is what i'd like to do:

$('#selector').popover({
  placement: 'bottom',
  callback: function(){
    alert('Awesome');
  }
});

回答1:

Works for tooltip:

var tmp = $.fn.tooltip.Constructor.prototype.show;
$.fn.tooltip.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

this.$('#selector').tooltip({ 
  placement: 'top', 
  callback: function() { 
    alert('hello') 
  } 
});

回答2:

Maybe this wasn't available when the previous answers were given but as of 2016, you can attach events to popovers (functionally equivalent to a callback).

$('#myPopover').on('shown.bs.popover', function () {
  // do something…
})

Events include:

show.bs.popover
shown.bs.popover
hide.bs.popover
hidden.bs.popover
inserted.bs.popover

Ref bootstrap docs

回答3:

This answer was posted just to clarify things as requested by crafter and contains code from the comment by Marquez.

First you extend Bootstrap's popover to handle a callback option.

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
    tmp.call(this); if (this.options.callback) {
        this.options.callback();
    }
}

Then you add a callback property to your option object and assign it with an anonymous function.

$('#popover-foo').popover({
    content: 'Hello world',
    callback: function () {
        alert('Hello');
    }
});

回答4:

Other Workaround:

Use the show.bs.popover or shown.bs.popover listeners

In the callback, the 'shown' event data links to the target which holds the popover ID, from here you could do the rest

$('body')
.popover(options)
.on('shown.bs.popover', function(shownEvent) {
        update_popover_data(shownEvent);
});

Callback function:

    function update_popover_data(shownEvent) {
         var id = $(shownEvent.target).attr('aria-describedby');
         $('#'+id).html('Your New Popover Content');
    }

来源：https://stackoverflow.com/questions/14694930/callback-function-after-tooltip-popover-is-created-with-twitter-bootstrap

标签

javascript

jquery

twitter-bootstrap