Hide bootstrap popover to blur EXCEPT if element inside popover has focus

Question

I have a Bootstrap popover with text input inside it. I want the popover to hide if the user clicks outside the popover, but stay open if anything inside the popover, such as an input field, gets focus.

Using trigger:focus does not work, because after displaying a popover, clicking on something, including popover, hides it.

I tried adding the $('.popover').on('blur') function, but I'm not sure how to handle checking that something inside the popover has focus when the blur event fires.

This script illustrates the unwanted behavior of http://jsfiddle.net/Lcsqjdgu/

Answer 1

This should work as you described.

• Adjust input focus when popover is displayed.
• Hide popup when blurring.

Fiddle

 $('button').on('shown.bs.popover', function() { $('#new_input').focus(); }) $(document).on('blur','.popover', function() { $(this).popover('hide'); }); 

Answer 2

You can try using a manual trigger. This will allow you to fully control when / how the popup is displayed or hidden.

 $('#bravo').popover({ html: true, trigger: 'manual', content: '<div class="input-group">'+ '<input id="new_input" type="text" placeholder="My Dashboard" class="form-control">'+ '<span class="input-group-btn">'+ '<button class="btn btn-success btn-default" type="button">Create</button>'+ '</span>'+ '</div>' }); $('#bravo').click(function() { $(this).popover('toggle'); }); 

See here Fidde.