How to Enable Bootstrap Tooltip on Disabled Button

How to enable Bootstrap tooltip on disabled button?

Here is some working code: http://jsfiddle.net/mihaifm/W7XNU/200/

$('body').tooltip({
    selector: '[rel="tooltip"]'
});

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

The idea is to add the tooltip to a parent element with the selector option, and then add/remove the rel attribute when enabling/disabling the button.

How to enable tooltip on disabled button in javascript?

Use title

function toggle() {
  var button = document.getElementById('button');
  if (button.disabled) {
    button.disabled = false;
    button.setAttribute('title', 'Enabled title');
  } else {
    button.disabled = true;
    button.setAttribute('title', 'Disabled title');
  }
}

<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>

Bootstrap tooltip on disabled button workaround

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/

In Bootstrap, why doesn't my disabled button have a tooltip?

It looks like you forgot to activate your tooltip.

You can do this by adding data-toggle="tooltip" to your button wrapper, and then adding $('[data-toggle="tooltip"]').tooltip() to your JS.

Also, there is a subsection showing the best way to enable tooltips on disabled elements.

Tooltip is not hiding, if we disabled the button on click

use hide or show :

        $("#btn").on("click", function () {
            $(this).prop("disabled", true);
             $('[data-toggle="tooltip"]').tooltip('hide');
        });

Bootstrap tooltip disable button Firefox/Chrome

Looks like this is a know issue with how the browsers work, and in the documentation for v4 they are saying you should wrap the button, quote from site:

Tooltips for .disabled or disabled elements must be triggered on a wrapper element.

v4 source

Upon further digging, it is also stated in the v3 documentation as such

Tooltips on disabled elements require wrapper elements

To add a tooltip to a disabled or .disabled element, put the element inside of a and apply the tooltip to that instead.

v3 source

Disabled Bootstrap 4 button with tooltip in Angular

One potential solution is to create tooltip inside button. It will start showing the tooltip for anything inside <button> tag

<button type="button" class="btn btn-primary" disabled>  <span tooltip="hello" [isDisabled]="false">    <i class="fa fa-book-open"></i> btn disabled  </span></button>

---

Related Topics