Unable to set Bootstrap Popover options via jQuery

Question

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

@ScanQR - I added data-original-title and it was a bit better - in that the popover shows with "My Dummy Title" . It still does not get set in the handler to "Pop1 title bar". I'm puzzled b/c it seems like Arun's jsfiddle (see above) is working seemingly unchanged. — user1072910, Dec 16 '16 at 08:41
@ArunPJohny - Dang! I created a new jsfiddle with the exact external resources you had and it doesn't work for me. aaargh. — user1072910, Dec 16 '16 at 08:49
@DarshakGajjar - Yup. The only difference in my jsfiddle was that I have jQuery 1.9.1 (I don't see an option for 1.10.1) and in Arun's jsfiddle he has 1.10.1. — user1072910, Dec 16 '16 at 09:06
@ArunPJohny - Here is the jsFiddle I created by copying your external resources etc. And nothing works now [jsfiddle.net/mmiz/3u1dcp1z/2/)](https://jsfiddle.net/mmiz/3u1dcp1z/2/) — user1072910, Dec 16 '16 at 09:13
@user1072910 you need to call `my_popover_handler` - https://jsfiddle.net/arunpjohny/3u1dcp1z/3/ — Arun P Johny, Dec 16 '16 at 09:17
Doh! Thank you. So my conclusion is that my bootstrap/jquery libs were suspect...Thanks for the patience and help. Should I "answer" my own question with this info or is there a way to withdraw the question altogether? — user1072910, Dec 16 '16 at 20:53
@ArunPJohny - In the jsfiddle, we don't actually initialize popovers - per the Bootstrap documentation, you have to call $('[data-toggle="popover"]').popover() at the very start. If I added that in, Popover1 no longer works. What is the reason behind this? — user1072910, Dec 20 '16 at 06:11

score 0 · Accepted Answer · answered Dec 16 '16 at 08:33

The first option did not work because you are missing relevant data-original-title attribute.

i.e.

<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>

Instead add the relevant attribute and try,

<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>

Unable to set Bootstrap Popover options via jQuery

1 Answers1