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

Question

My JSFiddle is here:

https://jsfiddle.net/h2kf5ztq/

I've largely tried to reproduce balexand's answer from:

How to enable bootstrap tooltip on disabled button?

including, importantly, the CSS:

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

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

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}

But for some reason, my disabled button doesn't have a tooltip.

How do I enable the tooltip?

Answer 1

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.

Answer 2

First of all for initialize tooltip you need to call it by javascript

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

For calling javascript you need to have data-toggle="tooltip" in your HTML, There is only mistake you have.

Updated Fiddle: https://jsfiddle.net/q18vefym/