Added onShow and onHide params to tooltip/popover #3346

wants to merge 2 commits into from

4 participants


This is useful to customize tooltips/popovers content


Can you give us some usage example?


You might want to take a look at how this is done in other BS plugins, such as bootstrap-modal.js.

Basically, you just trigger() a jQuery.Event which allows others to attach an event handler with bind() or on(). There should be no onXXX parameters.

@EgoAleSum EgoAleSum closed this May 14, 2012
@EgoAleSum EgoAleSum reopened this May 14, 2012

(sorry, I accidentally hit the "Close pull request" button!)

We are using this to create an UI control like:
(very OSX-ish, using jQuery UI's DatePicker)

We create the tooltip empty (content is ' ', a space) and then the following code:

            trigger: 'manual',
            placement: 'bottom',
            content: ' ',
            onShow: function() {
                $('.popover-content').append('<div class="btn" data-toggle="button">All times</div>')
            onHide: function() {
        .click(function() {

The DatePicker has to be created after the element is into the DOM, and needs to be destroyed before its container disappears.

I personally wrote that patch because I couldn't find any better way to do this...


Your use case is fine. However, your use of onShow and onHide parameters doesn't fit with the rest of Bootstrap. It's just a minor change to have the tooltip/popover code trigger() show and hide events. You can then use jQuery's on() method to bind your two anonymous functions to those events.


Uhm... Can you please show an example? I'm not sure exactly on which elements to apply the on() method...


Take a look at bootstrap-modal.js. The following code is from the start of the show function (I removed the unrelated parts):

var e = $.Event('show')

Basically, this triggers an event which can then be bound using jQuery's on() method.

$('#modal').on('show', function () {
  // do something

You might like to read more on jQuery's Event object, trigger() method and on() method. You can also read Bootstrap's JS Philosophy which explains this a little as well.


Ok, I rewrote the patch using the approach you suggested.
Appears to be working, to me... At least, elem.on('shown', function) and elem.on('hide', function) work perfectly!

Bootstrap member
fat commented Jun 3, 2012

This looks pretty great - thanks everyone! If you could reopen this pull request again 2.1.0, add some simple unit tests, and maybe add a preventDefault check for show and hide - i'd be happy to merge. thanks!

@fat fat closed this Jun 3, 2012

I updated the patch for 2.1.0-wip. You can see the new pull requested referenced above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment