Get Bootstrap Popover to appear when child elements are clicked

Question

Say I have a div that includes several child elements. Right now, I've added the popover settings as given in the documentation. However, when I click on my element it only appears when I click on anything that's not one of its children. For example, if I click on the user profile image icon or the user name, it won't appear. But if I click on the white space that's not either of them but still inside the element, it will appear. Picture below:

<div class="user-info user-image chat_user loadChatroom friend-view" data-toggle="popover" data-placement="top" data-content="content.">
  <span class="user-pic">
    <%= image_tag friend.profile_image_url, class: "img-fluid profileImage" %>
  </span>
  <span>
    <strong><%= friend.user_name %></strong>
  </span>
</div>

After looking on google, I couldn't find anything remotely related to this question. Any insight appreciated. Thanks!

Answer 1

As you can see on the example below - clicking any child element triggers popper the right way. Possible problems in your situation:

1. Check jQuery, Popper.js and Bootstrap versions. Stable combination below.

2. Maybe there is something in your popper JS configuration. The working example below.

$(function() {
  $('[data-toggle="popover"]').popover();
})

.user-info {
  margin: 10px;
  border: 2px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- needs for bootstrap .popper() -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="user-info user-image chat_user loadChatroom friend-view" data-toggle="popover" data-placement="bottom" data-content="content.">
  <span class="user-pic">
    <img src="https://via.placeholder.com/50" class"img-fluid profileImage">
  </span>
  <span>
    <strong>User Name</strong>
  </span>
</div>