Bootstrap专家:
我只是无法通过jQuery设置popover标题和内容!几个小时以来我一直在关注所有其他相关问题 - 没有骰子。请告诉我我错过了什么!
HTML:
<body class="homepage">
<p><a id="pop1" data-toggle="popover" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 1</a> </p>
<p><a id="pop2" data-toggle="popover" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 2</a> </p>
</body>
Javascript(我之前初次设置了弹出窗口。这是我想设置标题和内容的地方)
function my_popover_handler() {
var fcont_html="";
var ftitle_html="";
var fid="";
$('body').on('mouseenter','.my_popover',function(event) {
event.preventDefault();
fid =$(this).attr('id');
if (fid=="pop1"){
//Doesn't work
fcont_html="This is Pop1 content";
ftitle_html="Pop1 title bar";
$('#pop1').popover({title:ftitle_html,content:fcont_html});
$("#pop1").popover('show');
} else if (fid=="pop2"){
//This works
fcont_html="This is Pop2 content";
ftitle_html="Pop2 title bar";
$('#pop2').attr('data-original-title', ftitle_html);
$('#pop2').attr('data-content', fcont_html);
$("#pop2").popover('show');
}
}).on(' mouseleave','.fm_feat_popover',function(event) {
event.preventDefault();
$("[data-toggle=popover]").popover('hide');
});
}
对于第一个按钮pop1,我使用了Bootstrap文档所说的
$('#pop1').popover({title:ftitle_html,content:fcont_html});
哪个不起作用。第二个是pop2,
$('#pop2').attr('data-original-title', ftitle_html);
$('#pop2').attr('data-content', fcont_html);
它有效。
我的错误是什么?谢谢!
Mmiz
答案 0 :(得分:0)
第一个选项不起作用,因为您缺少相关的data-original-title
属性。
即
<a id="pop1" data-toggle="popover" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 1</a>
而是添加相关属性并尝试
<a id="pop1" data-toggle="popover" data-original-title="Dummy Title" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 1</a>