17

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');
  }
});
Jose Browne
  • 4,482
  • 3
  • 28
  • 29
  • Extend the `.popover` function. http://stackoverflow.com/questions/9137311/how-to-extend-twitter-bootstrap-plugin – Dan Blows Feb 06 '13 at 10:29

4 Answers4

26

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') 
  } 
});
user20140268
  • 1,313
  • 11
  • 16
  • 3
    Might seem silly, but it was not obvious for me how to make it work with the popover. For those that might also run into that little challenge, here is how: var tmp = $.fn.popover.Constructor.prototype.show; $.fn.popover.Constructor.prototype.show = function () { tmp.call(this); if (this.options.callback) { this.options.callback(); } }; – Marquez May 17 '13 at 17:42
  • Does anyone know which one of the prototype methods is for a cancel? https://github.com/twbs/bootstrap/blob/v2.3.2/js/bootstrap-tooltip.js – Andrew Mao Aug 12 '13 at 19:12
  • @marquez, add this solution in its own answer please, so it can be found easily, as this is the solution to the question. – crafter Apr 09 '14 at 06:07
14

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).

eg

$('#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

Michael Cho
  • 746
  • 7
  • 14
5

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');
    }
});
Fred
  • 12,086
  • 7
  • 60
  • 83
2

Other Workaround:

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

  2. 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');
    }
Michiel
  • 19
  • 2