是否可以使用div作为Twitter的Popover内容

Question

我正在使用twitter的引导程序popover here。现在，当我滚动弹出文本时，弹出窗口会显示来自<a>的data-content属性的文本。我想知道是否有人把<div>放在popover里面。有可能，我想在那里使用PHP和MySQL，但如果我能得到一个工作div我想我可以找出其余的。我尝试将数据内容设置为div ID，但它没有奏效。

HTML：

<a class='danger' 
    data-placement='above' 
    rel='popover' 
    data-content='#PopupDiv' 
    href='#'>Click</a> 

Answer 1

首先，如果你想用里面的内容HTML，你需要在HTML选项设置为true：

$('.danger').popover({ html : true}); 

那么你有两个选项来设置Popover的内容

• 使用数据内容属性。这是默认选项。
• 使用返回HTML内容的自定义JS函数。

使用数据内容： 你需要躲避HTML内容，这样的事情：

<a class='danger' data-placement='above' 
    data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
    title="Title" href='#'>Click</a> 

可以手动逃脱HTML或使用功能。我不知道PHP，但在Rails中我们使用* html_safe *。

使用JS功能： 如果你这样做，你有几个选项。我认为最简单的方法就是将你的div内容隐藏在任何你想要的地方，然后编写一个函数将其内容传递给popover。事情是这样的：

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

然后你的HTML看起来像这样：

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a> 
<div id="popover_content_wrapper" style="display: none"> 
    <div>This is your div content</div> 
</div> 

希望它能帮助！ PS：我在使用弹出窗口时没有设置标题属性，所以请记住总是设置标题。

Answer 2

另一种替代方法，如果你只是想看看流行的感觉。以下是该方法。Offcourse这是一个手工的东西，但是很好的可行:)

HTML - 按钮

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button> 

HTML - 酥料饼

<div class="bgform popover fade bottom in"> 
      <div class="arrow"></div> 
      ..... your code here ....... 
</div> 

JS

$("#bg").click(function(){ 
     $('.bgform').slideToggle(); 
}); 

Answer 3

建立在哈维的回答，这可以完成没有ID或像这样的附加按钮属性：

http://jsfiddle.net/isherwood/E5Ly5/

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide">My first popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide">My second popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide">My third popover content goes here.</div> 

$('.popper').popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     return $(this).next('.popper-content').html(); 
    } 
}); 

Answer 4

迟到了。建立其他解决方案。我需要一种方法来通过目标DIV作为变量。这是我做的。

HTML为酥料饼的源（添加了一个数据属性数据流行将保存为目的地DIV ID /或类值）：

<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper"> 

HTML为酥料饼的内容（我使用自举类隐藏）：

<div id="popper-content" class="hide">Content goes here</div> 

脚本：

$('.popper').popover({ 
placement: popover_placement, 
container: 'div.page-content', 
html: true, 
trigger: 'hover', 
content: function() { 
    var pop_dest = $(this).attr("data-pop"); 
    //console.log(plant); 
    return $("#"+pop_dest).html(); 
}}); 

Answer 5

除了其他答复。如果您在选项中允许html，则可以将jQuery对象传递给内容，并且将其与所有事件和绑定一起附加到弹出窗口的内容。下面是从源代码中的逻辑：

• 如果传递函数它会被称为解开内容数据
• 如果html不允许内容数据将作为文本被施加
• 如果html允许和内容数据是字符串作为html
• 否则内容数据将被附加到酥料饼的内容容器它将应用于

$("#popover-button").popover({ 
    content: $("#popover-content"), 
    html: true, 
    title: "Popover title" 
}); 

Answer 6

here is an another example 

<a data-container = "body" data-toggle = "popover" data-placement = "left" 
    data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt; 
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt; 
&lt;/p&gt;&lt;/div&gt; 
<?php echo $row1['4'] ?> &lt;hr&gt;&lt;div&gt; 
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow &lt;/button&gt; &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt; &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close &lt;/button&gt; &lt;/span&gt; 

&lt;/div&gt;"> 

<?php echo $row1['1'] ?> 
    </a> 

Answer 7

为什么这么复杂？只是把这个：

data-html='true' 

Answer 8

所有这些答案会错过一个非常重要的方面！

通过使用.html或innerHtml或outerHtml，您实际上不使用引用的元素。您正在使用该元素的html副本。这有一些严重的缺陷。

1. 您不能使用任何ID，因为ID将被复制。
2. 如果每次显示弹出窗口时都加载内容，则会丢失所有用户的输入。

你想要做的是将对象本身加载到弹出窗口中。

https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

HTML：

<h1> Test </h1> 

<div><button id="target">click me</button></div> 

<!-- This will be the contents of our popover --> 
<div class='_content' id='blah'> 
<h1>Extra Stuff</h1> 
<input type='number' placeholder='number'/> 
</div> 

JQuery的：

$(document).ready(function() { 

    // We don't want to see the popover contents until the user clicks the target. 
    // If you don't hide 'blah' first it will be visible outside of the popover. 
    // 
    $('#blah').hide(); 

    // Initialize our popover 
    // 
    $('#target').popover({ 
     content: $('#blah'), // set the content to be the 'blah' div 
     placement: 'bottom', 
     html: true 
    }); 
    // The popover contents will not be set until the popover is shown. Since we don't 
    // want to see the popover when the page loads, we will show it then hide it. 
    // 
    $('#target').popover('show'); 
    $('#target').popover('hide'); 

    // Now that the popover's content is the 'blah' dive we can make it visisble again. 
    // 
    $('#blah').show(); 


});