CODEWITHSUNDEEP
twitter-bootstrapmodal-dialogtooltip
Mircea
Mircea

Reputation: 113

How can I prevent the focus on the toggle button for a Bootstrap modal after the modal closes?

I have a button that toggles a Bootstrap modal. The button itself is wrapped in a div so a tooltip shows up on hover.

When I close the modal, the button gets focused and the tooltip shows without hovering the element.

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

 <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
             </div>
             
             <div class="modal-body">
                 <p>lorem ispum dolor sit amet</p>
             </div>
             
             
             <div class="modal-footer">
                 <button type="button" class="btn btn-primary">Submit</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
             </div>
         </div>
     </div>
</div>

See here exactly what's happening: http://jsfiddle.net/6t3kxhLb/

The only workaround I could come up with up until now was to blur the button when the hidden.bs.modal event fires up. But I'm not really happy with the result.

This is my workaround:

$('#modal').on('hidden.bs.modal', function(event){
    setTimeout(function(){
      $('[data-toggle="modal"]').blur();
    });
 });

Do you guys know any way to prevent the focus on the toggle button when the modal closes?

Upvotes: 8

Views: 5067

Answers (3)

Oliver Strobel
Oliver Strobel

Reputation: 41

This is the solution I used, worked like a charm:

$('.modal').on('hidden.bs.modal',function(event){
  event.stopImmediatePropagation();
});

Upvotes: 4

buddy lembeck
buddy lembeck

Reputation: 9

I'm going to chime in after some time on this topic. I avoid using Bootstraps data- attributes and use Jquery. I achieved this by the following...

// Use whatever to trigger the modal, in this case a class
// Get the modal trigger
var modalTriggerObj = $("body").find(".modal-trigger");

modalTriggerObj.on('click', function(e) {
  e.preventDefault();

  // Opens the modal
  $("#modal").modal();
  // Light up the modal trigger with css
  $(this).addClass('modal-on');

  // When the modal hides ...
  $("#modal").on('hide.bs.modal', function() {
    // Return the trigger to its default state
    modalTriggerObj.removeClass('modal-on');
  });
});

Upvotes: 0

DavidG
DavidG

Reputation: 119176

As per the Bootstrap documentation, you need to specify what triggers the tooltip. The options are click, hover, focus and manual while the default is to have both hover and focus. so just add data-trigger="hover" to your element:

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip" data-trigger="hover">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

Example fiddle: http://jsfiddle.net/6t3kxhLb/1/

Upvotes: 3

Related Questions