<p dir="auto">I am using popovers for the What is this? link for a credit card verification number field (see attached images). The popover contains an HTML table to format the text and image and is brought in via a PHP require() statement.</p>
<p dir="auto">The line of HTML used for this is as follows:<br>
&lt;span id="popover1" data-toggle="popover" data-placement="right" data-html="true" data-title="Visa/Discover Security Code" data-content="&lt;?php require( "_html/visa_cvc.html" ) ?&gt;"&gt; &lt;u&gt;What is this?&lt;/u&gt;&lt;/span&gt;</p>
<p dir="auto">Then table code is as follows:<br>
&lt;table class='cvc_table'&gt;&lt;caption&gt;This number is required &amp; recorded as an additional security precaution.&lt;/caption&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='/lcu-store/_images/cvc/ccid_visa.gif' alt='Image of VISA/Discover CVC Number'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;The 3-digit, non-embossed number printed at the right of the signature panel on the back of your card immediately following the account number.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</p>
<p dir="auto">Please note that the arrow of the popover is not aligned with the link as it should be. When I tried to set the data-location argument to "top", the popover was still positioned too low and completedly obscured the link, thereby preventing me from clicking it to dismiss the popover.</p>
<p dir="auto">Also please note that when the table content is removed, the arrow returns to a location approximating the correct location and the title is not pinned to the top as advertised regardless of content presence.</p>
<p dir="auto">No modifications were made to any Bootstrap CSS rules or Javascript code nor are there any CSS rules that supersede those published for a popover.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/795b958cf7d46b41779d8d120baab9d5473eaf9e9122d6e97d2b18100eda583a/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343937363634302f3737313034312f35386166656666362d653864612d313165322d396666332d3633313730623033653230342e6a7067"><img src="https://camo.githubusercontent.com/795b958cf7d46b41779d8d120baab9d5473eaf9e9122d6e97d2b18100eda583a/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343937363634302f3737313034312f35386166656666362d653864612d313165322d396666332d3633313730623033653230342e6a7067" alt="popover_closed" data-canonical-src="https://f.cloud.github.com/assets/4976640/771041/58afeff6-e8da-11e2-9ff3-63170b03e204.jpg" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/1c831d49a2eba31fa911d920f0d8291e35ffb0b3930d05fbc3a1dfb3124c6588/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343937363634302f3737313039342f64336361326232652d653864622d313165322d383262382d6239323437376531366430652e6a7067"><img src="https://camo.githubusercontent.com/1c831d49a2eba31fa911d920f0d8291e35ffb0b3930d05fbc3a1dfb3124c6588/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343937363634302f3737313039342f64336361326232652d653864622d313165322d383262382d6239323437376531366430652e6a7067" alt="popover_open" data-canonical-src="https://f.cloud.github.com/assets/4976640/771094/d3ca2b2e-e8db-11e2-82b8-b92477e16d0e.jpg" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/c17bb0869288508035be9bc80b8e7543452268a372e82455dac6f8c42adfe415/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343937363634302f3737313131392f36636464656530342d653864632d313165322d393863352d3836363938393561336463382e6a7067"><img src="https://camo.githubusercontent.com/c17bb0869288508035be9bc80b8e7543452268a372e82455dac6f8c42adfe415/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f343937363634302f3737313131392f36636464656530342d653864632d313165322d393863352d3836363938393561336463382e6a7067" alt="popover_open_sans_content" data-canonical-src="https://f.cloud.github.com/assets/4976640/771119/6cddee04-e8dc-11e2-98c5-8669895a3dc8.jpg" style="max-width: 100%;"></a></p>
<p dir="auto">I have a problem with the way the button setState method works.</p>
<p dir="auto">I have a project in which I am using a bootstrap button in a modal dialog, where the button's click action is to submit the form to a given URL, then close the dialog, with no further action allowed on the dialog. The desired result is that once a user clicks the submit button, the button is immediately disabled and remains disabled until the dialog is destroyed, but in the meantime the button state gets updated to indicate the status of the save request (e.g., maybe "Processing...", "Saving...", "Saved", etc).</p>
<p dir="auto">Bootstrap does not provide a good way to do this. The problem is that setting the button state to anything other than "loading" will enable the button after the current event stack has been processed.</p>
<p dir="auto">(The only workarounds that I'm aware of involve a hack using setTimeout to set the "disabled" attribute again after it is enabled, or to set the text of the button without setting the state, neither of which is desirable.)</p>
<p dir="auto">(This is a duplicate of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="4083449" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/3034" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/3034/hovercard" href="https://github.com/twbs/bootstrap/issues/3034">#3034</a>, but that issue was closed a year ago for lack of detail.)</p>
<p dir="auto">A rough, simplified example of the problem do can be seen at:<br>
<a href="http://bootply.com/84160" rel="nofollow">http://bootply.com/84160</a></p>
<p dir="auto">The Bootstrap code in question is:<br>
<a href="https://github.com/twbs/bootstrap/blob/master/js/button.js">https://github.com/twbs/bootstrap/blob/master/js/button.js</a><br>
lines 35-53, in the Button.prototype.setState method.</p>
<p dir="auto">Also pasted at:<br>
<a href="http://codepaste.dev7studios.com/item/ml2kpybyn" rel="nofollow">http://codepaste.dev7studios.com/item/ml2kpybyn</a></p>
<p dir="auto">The problem appears to be two-fold. One problem is that the code setting the disabled state of the button is located inside a call to setTimeout(function () {...}, 0), placing it at the <em>end</em> of the current event stack. The other is that setting the button to <em>any</em> state other than 'loading' will cause the button to be enabled. If either of these was fixed, the workaround would be easy.</p>
<p dir="auto">I think the "best practice" solution would be to allow the devloper to control the enabled/disabled state of the button when setting the state, which could be easily accomplished one of two ways:</p>
<ol dir="auto">
<li>Adding an additional parameter to the setState method. (Maybe a flag to indicate the button's state? Or an object defining additional options to set for the button?)</li>
<li>Accepting an additional data attribute in the html for the button. For instance:<br>
<code class="notranslate">&lt;button type="button" data-whatever-text="Whatever" data data-whatever-disabled="disabled"&gt;Rebellious Button&lt;/button&gt;</code><br>
being triggered by<br>
<code class="notranslate">$('button').button('whatever')</code><br>
would set the text to "Whatever" and disable the button</li>
</ol>