Question

我正在尝试使用Bootstrap 4制作一个电子商务网页。我想让我的产品图片显示一个带有Bootstrap Popover的弹出式窗口以供描述。但这不会显示。我什至删除了所有代码，并尝试从引导程序使用入门模板，但仍然无法正常工作。

这是我的弹出代码：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

这是我的js：

<script type="text/javascript">
$(function () {
    $('.example-popover').popover({
        container: 'body'
    })
})
</script>

Answer 1

在您的按钮中添加example-popover类名，它将起作用

 $('.example-popover').popover({
        container: 'body'
    })

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <button type="button" class="btn btn-lg btn-danger example-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

有人可以在这里解决我的自举弹出窗口问题吗？

1 个答案: