Bootstrap tooltip on disabled button workaround

Question

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.

I am trying to wrap the button in a div and initialize the tooltip in this element, as suggested by this solution I found around SO.

So I am trying this:

<div id="disabled-button-wrapper" data-title="Tooltip title">
  <button class="btn btn-primary" disabled="disabled">Button</button>
</div>

<script>
    $(function() {
        $('#disabled-button-wrapper').tooltip();
    });
</script>

jsfiddle

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?

Edit: when inspecting with the Chrome dev tools I do actually see a tooltip element is being generated, but there are a couple of issues:

• 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.
• The tooltip element is hidden somewhere, not being rendered properly.

Edit 2: I made some changes: jsfiddle

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: why isn't the hover event being fired on the wrapper when hovering over the part where the disabled button is?

Answer 1

If you really really inspect the jsfiddle you can see some css in there

1. to add some margin so we can see the tooltip that defaults to the top of the button

2.css that doesn't let button block mouse events from reaching the wrapper

#disabled-button-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

#disabled-button-wrapper  .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

demo:https://jsfiddle.net/dLt2ed5w/6/