How to enable Bootstrap tooltip on disabled button?

javascript jquery html twitter-bootstrap twitter-bootstrap-tooltip
Lorraine Bernard picture Lorraine Bernard · Nov 9, 2012 · Viewed 150.6k times · Source

I need to display a tooltip on a disabled button and remove it on an enabled button. Currently, it works in reverse.

What is the best way to invert this behaviour?

Here is a demo

P.S.: I want to keep the disabled attribute.

Answer

balexand picture balexand · Nov 12, 2013

You can wrap the disabled button and put the tooltip on the wrapper:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

If the wrapper has display:inline then the tooltip doesn't seem to work. Using display:block and display:inline-block seem to work fine. It also appears to work fine with a floated wrapper.

UPDATE Here's an updated JSFiddle that works with the latest Bootstrap (3.3.6). Thanks to @JohnLehmann for suggesting pointer-events: none; for the disabled button.

http://jsfiddle.net/cSSUA/209/

Related questions

How to add tooltip on each select option with bootstrap-select

I am trying to add tooltip to each select option with bootstrap-select. While I inspecting it seems the select-js converting the select tag to ul. I have no idea this is the reason for my code is not working. html &…

Read More
The data-toggle attributes in Twitter Bootstrap

What does data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API. I have seen a similar question before as well, link. But it didn't help me much.

Read More
How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More