<p dir="auto">I have a disabled button with markup that looks like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button id=&quot;doc-upload-btn&quot; class=&quot;btn btn-default btn-sm&quot; disabled=&quot;disabled&quot; title=&quot;Please save this document first.&quot;&gt;Add document&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button id="doc-upload-btn" class="btn btn-default btn-sm" disabled="disabled" title="Please save this document first."&gt;Add document&lt;/button&gt;
</code></pre></div>
<p dir="auto">No tooltip is shown when hovering and/or clicking on this button, using both the tooltip() method in boostrap.js and Chrome's native tooltips.</p>
<p dir="auto">Since this button is disabled, for better usability I'd like to show a tooltip which explains to users why the button is disabled (and what they can do about that). But it seems like tooltips on disabled form elements (and particularly buttons) are a little weird.</p>
<p dir="auto">We have several cases, as tested in Chrome:</p>
<h4 dir="auto">Native tooltip</h4>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button id=&quot;doc-upload-btn&quot; class=&quot;btn btn-default btn-sm&quot; title=&quot;Please save this document first.&quot;&gt;Add document&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button id="doc-upload-btn" class="btn btn-default btn-sm" title="Please save this document first."&gt;Add document&lt;/button&gt;
</code></pre></div>
<p dir="auto">An "enabled" button shows a native tooltip just fine.</p>
<h4 dir="auto">Native tooltip &amp; disabled attribute</h4>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button id=&quot;doc-upload-btn&quot; class=&quot;btn btn-default btn-sm&quot; disabled=&quot;disabled&quot; title=&quot;Please save this document first.&quot;&gt;Add document&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button id="doc-upload-btn" class="btn btn-default btn-sm" disabled="disabled" title="Please save this document first."&gt;Add document&lt;/button&gt;
</code></pre></div>
<p dir="auto">No tooltip shown. This is somewhat understandable, since by definition disabled elements cannot receive <code class="notranslate">:focus</code> events. Googling seems to indicate that disabled elements may or may not receive <code class="notranslate">:hover</code> events, as this is not consistently implemented across browsers.</p>
<h4 dir="auto">Native tooltip &amp; disabled class</h4>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button id=&quot;doc-upload-btn&quot; class=&quot;btn btn-default btn-sm disabled&quot; title=&quot;Please save this document first.&quot;&gt;Add
document&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button id="doc-upload-btn" class="btn btn-default btn-sm disabled" title="Please save this document first."&gt;Add
document&lt;/button&gt;
</code></pre></div>
<p dir="auto">No tooltip is shown. This case is a bit more puzzling. I expect to have the Bootstrap styles for <code class="notranslate">.disabled</code> applied (and they are), but still have the button be active and usable (it is not). I skimmed for anything in bootstrap.js that was looking for the <code class="notranslate">.disabled</code> CSS class and setting the corresponding <code class="notranslate">disabled="disabled"</code> attribute, but didn't find anything.</p>
<h4 dir="auto">Bootstrap tooltip &amp; disabled attribute</h4>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button id=&quot;doc-upload-btn&quot; class=&quot;btn btn-default btn-sm&quot; disabled=&quot;disabled&quot; title=&quot;Please save this document first.&quot;&gt;Add document&lt;/button&gt;
&lt;script&gt;
$(&quot;#doc-upload-btn&quot;).tooltip();
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;button id="doc-upload-btn" class="btn btn-default btn-sm" disabled="disabled" title="Please save this document first."&gt;Add document&lt;/button&gt;
&lt;script&gt;
$("#doc-upload-btn").tooltip();
&lt;/script&gt;
</code></pre></div>
<p dir="auto">No tooltip shown.</p>
<h4 dir="auto">Bootstrap tooltip &amp; disabled class</h4>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button id=&quot;doc-upload-btn&quot; class=&quot;btn btn-default btn-sm disabled&quot; title=&quot;Please save this document first.&quot;&gt;Add document&lt;/button&gt;
&lt;script&gt;
$(&quot;#doc-upload-btn&quot;).tooltip();
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;button id="doc-upload-btn" class="btn btn-default btn-sm disabled" title="Please save this document first."&gt;Add document&lt;/button&gt;
&lt;script&gt;
$("#doc-upload-btn").tooltip();
&lt;/script&gt;
</code></pre></div>
<p dir="auto">No tooltip is shown.</p>
<p dir="auto">It looks like this was discussed a while back for version 2 in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3476484" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/2373" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/2373/hovercard" href="https://github.com/twbs/bootstrap/issues/2373">#2373</a>, but I'd like to start a fresh conversation about it and see if one of these cases can be made to work. Showing a tooltip on a disabled button (to explain why it's disabled and what can be done to enable it) is a legitimate and important use for tooltips.</p>
<p dir="auto">I'm porting a site from Bootstrap 2.3.x to the 3.0 RC1.</p>
<p dir="auto">In the old site, I have some disabled buttons (<code class="notranslate">&lt;button class='btn disabled'&gt;</code>) that I've added tooltips to using <code class="notranslate">$("#my_button").tooltip()</code>. This works fine even though the button has the disabled class.</p>
<p dir="auto">In the new site, the tooltip plugin fails when the button has the disabled class. I can manually trigger the tooltip with <code class="notranslate">$("#my_button").tooltip('show')</code>, but hovering over the button does nothing. It works fine if I remove the <code class="notranslate">disabled</code> CSS class from the button. I've also tried using the disabled attribute (<code class="notranslate">disabled="disabled"</code>) with the same result.</p>
<p dir="auto">If this isn't a bug, is there a workaround to allow a tooltip on a button that looks disabled? I don't care about how the button functions - I can programatically disable it's functionality.</p>
<p dir="auto">Here's a jsfiddle with the old behavior (what I want): <a href="http://jsfiddle.net/nRKe8/" rel="nofollow">http://jsfiddle.net/nRKe8/</a></p>
<p dir="auto">And here's an example of the behaviour in 3.0.0-rc1: <a href="http://jsfiddle.net/T6U5n/" rel="nofollow">http://jsfiddle.net/T6U5n/</a></p>