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

Question

My JSFiddle is here:

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?

Did you look at this link https://stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button — TAB, Apr 20 '19 at 23:10
you are missing the jquery code to activate the tooltip:https://jsfiddle.net/ah3016vy/ — Temani Afif, Apr 20 '19 at 23:23

Hybrid · Accepted Answer · 2019-04-20T23:37:43.510

4

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.

edited Apr 20 '19 at 23:37

answered Apr 20 '19 at 23:29

Hybrid

6,236
2
23
45

1

Echoing this line in the documentation; `Tooltips are opt-in for performance reasons, so you must initialize them yourself.` – James Ives Apr 20 '19 at 23:36

score 1 · Answer 2 · answered Apr 21 '19 at 10:25

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/

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

2 Answers2