CODEWITHSUNDEEP
twitter-bootstrap
GergelyPolonkai
GergelyPolonkai

Reputation: 6421

Programmatically close Bootstrap popovers

I have a bunch of form fields, both text inputs and checkboxes. Text inputs are configured to display some help text in a popover upon entering them (focus):

<input class="form-control" data-content="help text" data-html="true" data-placement="top" data-toggle="popover" data-trigger="focus" id="id_field_329" name="field_329" rel="popover" type="text">

Checkboxes also have popover help text, but it appears both on focus and mouseover:

<input class="form-control" data-content="help text" data-html="true" data-placement="top" data-toggle="popover" data-trigger="hover focus" id="id_field_331" name="field_331" rel="popover" type="checkbox">

The whole popover thingie is activated with:

$('[rel=popover]').popover();

Now when my textual cursor is in a text input field, the popover help bubble is displayed, but when I move my mouse over a checkbox, the checkbox help text is also displayed, potentially covering the input box I’m just editing.

Question is, is it possible to set the popovers to close when another one is displayed?

Edit: @Coding Enthusiast’s answer was almost good, except I wanted my onfocus popover to display again once my mouse leaves the checkbox. I approve his answer with this modification added.

Upvotes: 0

Views: 1366

Answers (1)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

you can give your popover elements a class (special-popover-class) then once one is hovered you hide all the others. You target them using that class. 

$('.special-popover-class').on('mouseover', function (e) {
       $('.special-popover-class').not(this).popover('hide');
});

Edit: This above solution is perfect, except for the newly-added requirement, which could be solved like this:

$('[rel=popover][type=checkbox]').on('mouseout', function(e) {
    if ($(this) != $(':focus')) {
        $(':focus').popover('show');
    }
});

Upvotes: 3

Related Questions