title: Bootstrap tooltip on disabled button workaround
body: <p>I am trying to use a Bootstrap tooltip on a disabled button to let the user know why the button is in such state. However, the fact that most browsers don't fire a click or hover event on a disabled element makes things harder.</p>
  
  <p>I am trying to wrap the button in a div and initialize the tooltip in this element, as suggested by <a href="http://jsfiddle.net/cSSUA/209/" rel="nofollow noreferrer">this</a> solution I found around SO.</p>
  
  <p>So I am trying this:</p>
  
  <pre><code>&lt;div id="disabled-button-wrapper" data-title="Tooltip title"&gt;
    &lt;button class="btn btn-primary" disabled="disabled"&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $(function() {
          $('#disabled-button-wrapper').tooltip();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/dLt2ed5w/1/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>But the tooltip is not working at all. Actually, it's not even because of the button, no matter what the content is, the tooltip is not working on the wrapper div. What's going on here? What obvious detail am I missing?</p>
  
  <p><strong>Edit:</strong> when inspecting with the Chrome dev tools I do actually see a tooltip element is being generated, but there are a couple of issues:</p>
  
  <ul>
  <li>It is only triggered when hovering to the right of the button: the div takes all the width (which, by the way, I would like for the parent to be just as wide as the button). But not when hovering over the button.</li>
  <li>The tooltip element is hidden somewhere, not being rendered properly.</li>
  </ul>
  
  <p><strong>Edit 2:</strong> I made some changes: <a href="https://jsfiddle.net/dLt2ed5w/3/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>That way the wrapper doesn't take all the width, and using the body as the container would solve the rendering issue. Now the only remaining issue is: <strong>why isn't the hover event being fired on the wrapper when hovering over the part where the disabled button is?</strong></p>