Close an open popover-show on click in a dropdown


#1

Hi,

I'm working on notice (a popover) of Private Messages on my forum with Bootstrap 3.3.5.

Private Message link is in a link in li dropdown, in the dropdown there is the list of PM unread, with title, hour etc of the PM.

If user receives a new Private Message, before there is a popover "You have received Xz new private messages, click to read" and then there is li dropdown with list of Private Messages.

Popover is always show when the page is loaded, like an alert for the user.

And when user clicks on Private Message, popover is closed and user can read private messages.

The problem is that popover is always open, also when I read private messages, so it's impossible to read unread PMs.

My code is:

<li class="dropdown popover-show" data-toggle="popover" data-placement="bottom" data-container="body" data-content="You have 5 new Private Messages! But this notice is always open, so you can't read unread PM :( ">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>Private Messages</span>
<span class="badge">5</span> <span class="caret"></span></a>

<ul class="dropdown-menu  dropdown-menu-sw">
<li><a href="#"><strong>Title PM etc - Unread</strong></a></li>
</ul>

</li>



<script>
$(function () {
$('.popover-show').popover('toggle');
});
</script>

I would like only that on my first click on "Private Messages" (the popover) it is close and I can read private messages.

Bootply full example: http://www.bootply.com/zWQXzrS9zo

Thank you,
sorry for my English


#2

Maybe a google search brings you on the right track

pop-over Dismiss on next click site:getbootstrap.com


#3

I tried many many times dismiss and all on Google, nothing works. Tried all examples, tips, etc. Nothing.

Probably (with a google search) it's a bug (it's me): https://github.com/twbs/bootstrap/issues/17936

I deleted popover.

Thank the same


#4

The site stackoverflow.com is a site where a lot of programmers meet.
for
== discussions / opinions==
bootstrap popover problem site:stackoverflow.com


#5

You can use this code:
$('body').on('click', function (e) {
$('[data-toggle=popover]').each(function () {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide'); }
});
});