How to enable Bootstrap tooltip on disabled button?

0 votes

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?

$('[rel=tooltip]').tooltip();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>
May 12 in JQuery by kartik
• 11,890 points
47 views

1 answer to this question.

0 votes

Hii @kartik,

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.

Thank You!!

answered May 12 by Niroj
• 23,950 points

Related Questions In JQuery

0 votes
1 answer

Twitter Bootstrap: How to see the state of a toggle button?

Hii @kartik, You can see what classes the ...READ MORE

answered May 12 in JQuery by Niroj
• 23,950 points
29 views
0 votes
1 answer

How to remove close button on the jQuery UI dialog?

Hii, I found this worked for me in the end ...READ MORE

answered May 12 in JQuery by Niroj
• 23,950 points
39 views
0 votes
1 answer

How to check if button is disabled in jQuery Mobile?

Hello, you can try $("#deliveryNext").is(":disabled") The following code works for ...READ MORE

answered May 29 in JQuery by Niroj
• 23,950 points
25 views
0 votes
1 answer

Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

Hii @kartik, It's caused by jquery-ui and bootstrap-button ...READ MORE

answered May 12 in JQuery by Niroj
• 23,950 points
48 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28 in JQuery by Niroj
• 23,950 points
208 views
+1 vote
1 answer

How to set cache false for getJSON in jQuery?

Hello @kartik, Your code just needs a trigger ...READ MORE

answered May 29 in JQuery by Niroj
• 23,950 points
18 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered 2 days ago in Java-Script by Niroj
• 23,950 points
16 views
0 votes
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 23,950 points
475 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12 in JQuery by Niroj
• 23,950 points
35 views
0 votes
1 answer

How to close all active bootstrap modals on session timeout?

Hello @kartik, Use the following code: $('.modal').modal('hide'); Also if you ...READ MORE

answered May 12 in JQuery by Niroj
• 23,950 points
57 views