Added onShow and onHide params to tooltip/popover #3346

Closed
wants to merge 2 commits into from

4 participants

@EgoAleSum

This is useful to customize tooltips/popovers content

@molszanski

Can you give us some usage example?

@richardp-au

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
@EgoAleSum

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

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

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

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

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

@richardp-au

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.

@EgoAleSum

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

@richardp-au

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')
this.$element.trigger(e)

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.

@EgoAleSum

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!

@fat
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
@EgoAleSum

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