我正在使用twitter的bootstrap的popover here。现在,当我滚动弹出文本时,弹出窗口中只显示<a>
的{{1}}属性中的文字。我想知道是否还有一个data-content
放在popover中。潜在地,我想在那里使用php和mysql,但如果我能得到div工作,我想我可以弄清楚剩下的。我尝试将数据内容设置为<div>
ID,但它没有用。
HTML:
div
答案 0 :(得分:296)
首先,如果要在内容中使用HTML,则需要将HTML选项设置为true:
$('.danger').popover({ html : true});
然后您有两个选项来设置Popover的内容
使用数据内容: 您需要转义HTML内容,如下所示:
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
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:我在使用popover而不设置title属性时遇到了一些麻烦...所以,记得要始终设置标题。
答案 1 :(得分:42)
基于jävi的答案,这可以在没有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();
}
});
答案 2 :(得分:11)
另一种替代方法,如果你想拥有弹出的外观和感觉。以下是方法。当然这是一个手动的东西,但很好用:)
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 - popover
<div class="bgform popover fade bottom in">
<div class="arrow"></div>
..... your code here .......
</div>
JS
$("#bg").click(function(){
$('.bgform').slideToggle();
});
答案 3 :(得分:10)
晚会。建立其他解决方案。我需要一种方法将目标DIV作为变量传递。这就是我所做的。
用于Popover源代码的HTML(添加了一个数据属性 data-pop ,它将保存目标DIV id /或类的值):
<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">
用于Popover内容的HTML(我使用的是bootstrap hide class):
<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();
}});
答案 4 :(得分:8)
除了其他回复。如果您在选项中允许html
,则可以将jQuery
对象传递给内容,并将其附加到包含所有事件和绑定的popover内容。以下是源代码中的逻辑:
html
,则内容数据将作为文字应用html
且内容数据为字符串,则会将其应用为html
$("#popover-button").popover({
content: $("#popover-content"),
html: true,
title: "Popover title"
});
答案 5 :(得分:2)
所有这些答案都错过了一个非常重要的方面!
通过使用.html或innerHtml或outerHtml,您实际上并未使用引用的元素。您正在使用元素的html副本。这有一些严重的缺点。
您要做的是将对象本身加载到popover中。
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();
});
答案 6 :(得分:0)
为什么这么复杂?就这样说:
data-html='true'
答案 7 :(得分:-1)
here is an another example
<a data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "<img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' ><div><h3> <?php echo $row1['1'] ?></h3> <p> <span><?php echo $countsss ?>videos </span>
<span><?php echo $countsss1 ?> followers</span>
</p></div>
<?php echo $row1['4'] ?> <hr><div>
<span> <button type='button' class='btn btn-default pull-left green'>Follow </button> </span> <span> <button type='button' class='btn btn-default pull-left green'> Go to channel page</button> </span><span> <button type='button' class='btn btn-default pull-left green'>Close </button> </span>
</div>">
<?php echo $row1['1'] ?>
</a>