Bootstrap experts:
I'm just not able to set popover title and content via jQuery! I've been looking at all the other related questions for hours - no dice. Please tell me what I'm missing!
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 (I initialize popovers earlier. This is where I want to set the title and content)
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');
});
}
For the first button, pop1, I used what Bootstrap documentation says
$('#pop1').popover({title:ftitle_html,content:fcont_html});
which does not work. With the second, pop2 ,
$('#pop2').attr('data-original-title', ftitle_html);
$('#pop2').attr('data-content', fcont_html);
it works.
What is my error? Thank you!
Mmiz
The first option did not work because you are missing relevant
data-original-titleattribute.i.e.
Instead add the relevant attribute and try,