当点击子元素时，让 Bootstrap Popover 出现答案

【问题标题】：Get Bootstrap Popover to appear when child elements are clicked当点击子元素时，让 Bootstrap Popover 出现
【发布时间】：2020-06-13 05:45:57
【问题描述】：

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

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

在谷歌上查看后，我找不到与此问题相关的任何内容。任何见解表示赞赏。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 popover

【解决方案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>

【讨论】：