单击子元素时显示 Bootstrap 弹出框

Question

假设我有一个包含多个子元素的 div。现在，我已经添加了 documentation 中给出的弹出窗口设置。但是，当我单击我的元素时，它只会在我单击任何不是其子元素的元素时出现。例如，如果我单击用户个人资料图像图标或用户名，它不会出现。但是如果我点击白色 space ，它不是它们中的任何一个但仍在元素内部，它就会出现。下图：

<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>

查看 google 后，我找不到与此问题有任何关联的内容。任何见解表示赞赏。谢谢！

Answer 1

正如您在下面的示例中看到的那样 - 单击任何子元素都会以正确的方式触发 popper。您的情况可能存在的问题：

检查 jQuery、Popper.js 和 Bootstrap 版本。下面的稳定组合。
也许您的 popper JS 配置中有问题。下面的工作示例。

$(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>

单击子元素时显示 Bootstrap 弹出框

Get Bootstrap Popover to appear when child elements are clicked

html

css

popover

twitter-bootstrap

bootstrap-4