Twitter Bootstrap .on('show',function(){}); not working for 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?

What about the fact that it's out of the *onDomReady* call : `$(function (){})` ? — Sherbrow, Oct 25 '12 at 17:24
I tried that, but that didn't change anything - it shouldn't need to be there from my understanding. — dacopenhagen, Oct 25 '12 at 22:18

score 22 · Answer 1 · answered Oct 17 '14 at 02:45

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'); });

score 8 · Accepted Answer · edited Sep 05 '13 at 09:07

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

score 2 · Answer 3 · answered Apr 23 '13 at 06:25

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

score 1 · Answer 4 · answered Sep 07 '17 at 06:49

1

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

answered Sep 07 '17 at 06:49

Patrick Hrastnik

11
2

score 0 · Answer 5 · answered Jun 11 '14 at 19:12

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.

score 0 · Answer 6 · edited Oct 19 '16 at 19:19

0

It's .on('shown') not .on('show')

edited Oct 19 '16 at 19:19

Petter Friberg

21,252
9
60
109

answered Oct 19 '16 at 19:18

Bradley Kovacs

119
1
7

Great comment, I think this may be new to twitter bootstrap. This is a very outdated question at this point. – dacopenhagen Oct 28 '16 at 19:34

Twitter Bootstrap .on('show',function(){}); not working for popover

6 Answers6

Linked