Geek Answers Handbook

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

I try 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 ('request') and console.log ('messages'); never displayed, even if prompts and messages appear, what am I doing wrong?

+7
source share
6 answers

The popover plugin does not fire any event. Also a tooltip plugin (as popover extends the 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' ? Since the default popover trigger for version 2.1.1 is click . See file popup doc (github)

You can use the following events:

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

Bootstrap now supports popover events - see the "Events" section in official reports for a change log here ).

Example:

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

you can easily do this using the class and having more and more organized codes:

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

check out my demo

and if you want to have form control inside, configure 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 out the demo

+2
source

This .on('shown') not .on('show')

0
source

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

show.bs.popover

I tried and it works great

0
source

Try the following:

  $(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 the event handler to the entire document, and if it is not a popover element, it will hide all popovers.

In addition, in the show.bs.popover event (fired before the popover opens), it will hide all the others.

-one
source

More articles:


All Articles