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?

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?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Well, the jsfiddle doesn't work since you haven't loaded the necessary libraries... – junkfoodjunkie Commented Apr 27, 2017 at 7:27
• @junkfoodjunkie yes I have? – dabadaba Commented Apr 27, 2017 at 7:28
• 1 why do you need a disabled button in the first place? xy problem – madalinivascu Commented Apr 27, 2017 at 7:33
• 1 @madalinivascu is that a serious question? – dabadaba Commented Apr 27, 2017 at 7:34
• 1 @madalinivascu not sure I understand what you mean with that, but check out my second edit – dabadaba Commented Apr 27, 2017 at 7:41

3 Answers 3

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/dLt2ed5w/6/

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./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

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 ming from container.

Demo