Question

我试图将html属性中的bootstrap popover内容分开，就像你可以使用其他组件一样，但是我无法让它工作......

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
    <h3>Popover Example</h3>
    <p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p>
    <div class="popover" >
      <a href="#" class="popover-toggle" title="Popover Header" >Toggle popover</a>
        <div class="popover-content">
          Here I am
        </div>
     </div>
  </div>

 <script>
   $(document).ready(function(){
     $('[data-toggle="popover"]').popover();  
   });
 </script>

 </body>
 </html>

Answer 1

你有简单的锚和一些不应该显示的div。

<a href="#" id="tglr" class="popover-toggle" title="Popover Header">Toggle popover</a>
<div id="customdiv" style="display: none">
    Here <b>I</b> am
</div>

在JS中我们得到我们的锚（通过id）并在其上安装popover，有两个选项：first'html' - 允许显示html而不是简单文本，second指定内容，从我们的div获得：

$(document).ready(function(){
    $('#tglr').popover({
        html : true, 
        content: function() {
            return $('#customdiv').html();
        } 
    });  
 });

以下是您的示例https://jsfiddle.net/DTcHh/8529/

你的代码的一个问题 - 你执行$（'[data-toggle =“popover”]'），它将选择数据切换等于“popover”的标签，但你没有这样的标签。如果你想以这种方式初始化弹出窗口，你应该像这样声明锚：

<a href="#" data-toggle="popover" class="popover-toggle" title="Popover Header">Toggle popover</a>

但是在你的情况下，你只有一个链接有一个自定义弹出框，所以它更符合逻辑地选择它。

带有html内容的bootstrap popover

1 个答案: