CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialoghidden
AMarch
AMarch

Reputation: 153

Prevent bootstrap modal shown.bs.modal/hidden.bs.modal events from firing when tooltips show/hide

I have a Bootstrap modal form containing a text input and some buttons. The buttons have Bootstrap tooltips assigned to them. I use the shown and hidden events to monitor when the modal form is displayed (shown.bs.modal) and dismissed (hidden.bs.modal).

What I've found is that - when the modal form is visible on-screen - moving the cursor over any control with a tooltip causes the shown and hidden events to fire. That makes a mess of my page control logic (certain things are designed to happen only when the form switches between its shown/hidden states).

Fiddle

Move your cursor over the Close or Save button to see what I'm describing.

I haven't been able to find anyone else talking about this, so perhaps it's an expected behaviour? I can work around it clumsily by checked whether the form REALLY IS hidden in the hidden.bs.modal event:

if ($(this).hasClass('in'))
{
  ...
}

Other StackOverflow questions suggested this as a more reliable method:

$("element").data('bs.modal').isShown

But if I do that I get:

$(...).data(...) is undefined

Regardless, this isn't a very satisfying workaround. Is there some other configuration setting that I'm missing here, or some other action I need to take to prevent the events firing under these conditions? Thank you

Environment: jQuery 1.8.3 Bootstrap: 2.3.2

Upvotes: 1

Views: 2067

Answers (1)

AMarch
AMarch

Reputation: 153

Apparently this has been a known issue with Boostrap prior to version 3 for some time. There's a thread on github which discusses the same problem and posits some solutions.

Upvotes: 1

Related Questions