Twitter Bootstrap .on（'show'，function（）{}）; 不适用于popover

Question

I am trying to hide all other popovers when a new popover is selected by doing the following:

My HTML

a.btn#requests(rel='popover',data-placement='bottom',data-original-title='<b>Requests</b>',data-content='My content goes here')

My Javascript

  $(function (){
    console.log('start');
    $('#requests').popover();
    $('#messages').popover();

  });

  //This doesn't work for some reason?
  $('#requests').on('show', function (e) {
    console.log('requests');
    $('#messages').popover('hide');
  });

  $('#messages').on('show', function () {
    console.log('messages');
    $('#requests').popover('hide');
  });

However, my console.log('requests') and console.log('messages'); is never getting shown even though the requests and messages popovers are showing, what am I doing wrong?

Answer 1

Bootstrap now supports popover events - see the Events section in the official popover docs (and here's the doc changelog ).

Example:

$('#requests')
.popover()
.on('show.bs.popover', function() { console.log('o hai'); })
.on('hidden.bs.popover', function() { console.log('ciao'); });

Answer 2

The popover plugin doesn't trigger any event. Neither does the tooltip plugin (since popover extends tooltip). Check this issue (github) for alternatives.

You can use different JS events depending on your trigger . For your example : Demo (jsfiddle)

$(function (){
    console.log('start');
    $('#requests').popover();
    $('#messages').popover();

    $('#requests').on('click', function (e) {
        console.log('requests');
        $('#messages').popover('hide');
    });

    $('#messages').on('click', function () {
        console.log('messages');
        $('#requests').popover('hide');
    });

});

Why 'click' ? Because the default popover trigger for version 2.1.1 is click . See the popover doc (github)

You can use the following events :

• trigger: 'click' : on click
• trigger: 'hover' : display on mouseenter and hide on mouseleave
• trigger: 'focus' : display on focus and hide on blur
• trigger: 'manual' : use your own code to display and hide anyway

Answer 3

you can easily do it by using class and haveing less and more organazied codes:

$(document).ready(function(){

    $('.btn').popover();

    $('.btn').on('click', function (e) {
        $('.btn').not(this).popover('hide');
    });
});

check my demo here

and if you want to have form control inside customize this code:

var mycontent = '<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

$('.btn').popover({
        content:mycontent,
        trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});


   $('.btn').on('click', function (e) {
       $('.btn').not(this).popover('hide');
    });
});

check the demo here

Answer 4

According to https://getbootstrap.com/docs/3.3/javascript/#popovers-events the name of the event is

show.bs.popover

I tried it, and it works fine

Answer 5

Try this:

            $(document).on('click', function(e) {
                if (!$(e.target).is('[data-original-title]')) {
                    $('[data-original-title]').popover('hide'); 
                }
            });

            $(document).on('show.bs.popover', function(e) { 
                $('[data-original-title]').popover('hide'); 
            });

This sets a event handler on the whole document and if it's not a popover element it will hide all popovers.

Also, on the event show.bs.popover (triggered prior to opening a popover) it will hide all others.

Answer 6

它是.on('shown')而不是.on('show')