I have some Bootstrap-Buttons, which should show a popover when the button is clicked.

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true});
}

When the website has loaded and I click the button a first time, nothing happens. If I click a second time, the popover opens and it works normal.

What can I do for the popover to appear on the first click?

I have some Bootstrap-Buttons, which should show a popover when the button is clicked.

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true});
}

When the website has loaded and I click the button a first time, nothing happens. If I click a second time, the popover opens and it works normal.

What can I do for the popover to appear on the first click?

• javascript
• html
• twitter-bootstrap
• popover
• jquery-events

• usernameL is the Button, which should show the popover. e.currentTarget.id is the id from the Button, because the button is created a few times in a for-loop. – user2636842 Commented Jul 31, 2013 at 6:48
• Why don't you try <script> before </body> – Dhaval Marthak Commented Jul 31, 2013 at 6:56
• i copy the script from bootstrap that using popover by button <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a> – Huei Tan Commented Jul 31, 2013 at 7:03

4 Answers 4

In your code, first time you click on button the popover start to init only, so until the second click, you see the effect,

I'm not sure about the version popover which you used. As the resource which I have found, they are using the jquery also.

https://github./klaas4/jQuery.popover/blob/master/demo.html

You can init the popover first, and then trigger click for it from any button which you want First approach, bind popover directly into button

$(function(){
    $("[name=usernameL]").popover({trigger: 'click'});
});

Second appoach, bind popover from a content div, and show popup from a button click

$("#divcontent").popover({trigger: 'click'});
$("[name=usernameL]").click(function(){$("#divcontent").trigger('click')});

What about this?

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true}).popover('show');
}

try this

usernameL.onclick = function(e){
   $("#" + e.currentTarget.id).popover({html : true});//Initializes popover
   $("#" + e.currentTarget.id).popover('show');//show popover
}

try the jquery style,

i suppose the button is id usernameL

$('#usernameL').click(function(){
$(this).popover();
});