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

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