Note that there are some explanatory texts on larger screens.

plurals
  1. POPopovers not showing up on first click but show up on second click
    text
    copied!<p>I found a related post which did not help: <a href="https://stackoverflow.com/questions/12333585/twitter-bootstrappopovers-are-not-showing-up-on-first-click-but-show-up-on-seco">Twitter bootstrap:Popovers are not showing up on first click but show up on second click</a></p> <p>The difference is in my page I have several elements which require popover (several tips-icon), so I need to loop over them.. </p> <p>My markup:</p> <pre><code>&lt;a href="#" name="click_help_container" id="click_mainhomeform_tasks" data-original-title=""&gt;&lt;img class="help_icon" src="http://media.mysite.com/pub/images/help/tips-icon.png"&gt; &lt;/a&gt; </code></pre> <p>This is my javascript:</p> <pre><code> var h=document.getElementsByName("click_help_container"); for (i=0;i&lt;h.length;i++) { $('#'+h[i]['id']).click( function () { var id=$(this).attr("id"); getHelp(id,$(this),function(t,elem) { var isVisible = false; var clickedAway = false; $(elem).unbind('click'); $(elem).popover( { "title":t.title, "content":"&lt;p class='popover_body_text'&gt;"+t.content+"&lt;/p&gt;", "html":true, "animation":true, "placement":"bottom", "trigger":"manual" }).click(function(e) { $(this).popover('show'); clickedAway = false; isVisible = true; e.preventDefault(); }); $(document).click(function(e) { if(isVisible &amp; clickedAway) { $(elem).popover('hide') isVisible = false; clickedAway = false; }else { clickedAway = true; } }); //$(elem).popover('show'); }); }); } </code></pre> <p>The problem is when I click on the tips-icon.png button, the popover doesn't show up on first click (I guess it's because I have 2 .click() calls When I click on the button the second time popover shows up and it then maintains it's toggle behavior from there onwards.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload