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?

Well, the jsfiddle doesn't work since you haven't loaded the necessary libraries... — junkfoodjunkie, Apr 27 '17 at 07:27
why do you need a disabled button in the first place? xy problem — madalinivascu, Apr 27 '17 at 07:33
@madalinivascu not sure I understand what you mean with that, but check out my second edit — dabadaba, Apr 27 '17 at 07:41

score 5 · Accepted Answer · answered Apr 27 '17 at 07:43

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

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/

also add `cursor:not-allowed;` under `#disabled-button-wrapper` to make it look like a disabled button — Mhd Alaa Alhaj, Apr 27 '17 at 07:57

score 2 · Answer 2 · edited May 23 '17 at 12:10

How to enable bootstrap tooltip on disabled button?

$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

#disabled-button-wrapper {
  display: inline-block;
}

#disabled-button-wrapper .btn[disabled] {
  pointer-events: none;
}

#disabled-button-wrapper {
  cursor: not-allowed;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

score 2 · Answer 3 · answered Apr 27 '17 at 07:58

You need below CSS.

#disabled-button-wrapper .btn[disabled] {
  /* you need this line, not to block hover event from div */
  pointer-events: none;
}
#disabled-button-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

Explanation:-

You need to set pointer-events: none; for the disabled button, beacuse disable button actually blocks the event from its parent container, so you need to tell not to block the hover event comming from container.

Demo

Bootstrap tooltip on disabled button workaround

3 Answers3