如何使用 jquery 或 JavaScript 将元素属性与 Bootstrap Popover html 绑定？

Question

下面给出的代码包含一个按钮。单击按钮时，会显示带有硬编码详细信息的弹出窗口。

弹出窗口是否可以从按钮属性中获取详细信息，例如data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"
第二个问题是，当用户再次单击按钮时，弹出窗口会关闭。是否有可能停止它，而不是我们可以在弹出窗口中提供一个 close 按钮，然后单击它应该关闭弹出窗口。

非常感谢您的帮助。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('[data-toggle="popover"]').popover({
        placement: 'top',
        html: true,
        title: 'User Info <a href="#" class="close" data-dismiss="alert">×</a>',
        content: '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
      });
      $(document).on("click", ".popover .close", function() {
        $(this).parents(".popover").popover('hide');
      });
    });
  </script>
  <style type="text/css">
    .bs-example {
      margin: 160px 10px 0;
    }
    .popover-title .close {
      position: relative;
      bottom: 3px;
    }
  </style>
</head>

<body>
  <div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button>
  </div>
</body>

</html>

Answer 1

举个例子，应该对你有帮助：

动态内容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('[data-toggle="popover"]').popover({
        placement: 'top',
        html: true,
        title: function() {           
           return $(this).data('title') + '<a href="#" class="close" data-dismiss="alert">×</a>'; 
        },
        content: function() {
           return $(this).data('content'); 
        }
      });
      $(document).on("click", ".popover .close", function() {
        $(this).parents(".popover").popover('hide');
      });
    });
  </script>
  <style type="text/css">
    .bs-example {
      margin: 160px 10px 0;
    }
    .popover-title .close {
      position: relative;
      bottom: 3px;
    }
  </style>
</head>

<body>
  <div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-title="Custom Title" data-content="Custom Content">Click Me</button>
  </div>
</body>

</html>

查看弹出窗口 trigger 参数：

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

如何使用 jquery 或 JavaScript 将元素属性与 Bootstrap Popover html 绑定？

How to bind element attributes with Bootstrap Popover html using jquery or JavaScript?

html

javascript

jquery

popover

jscript