Lorraine Bernard Lorraine Bernard - 1 year ago 89
jQuery Question

How to enable bootstrap tooltip on disabled button?

I need to display a tooltip on disabled button and remove it on enabled button.
Actually it works in reverse way.

What is the best way to invert this behaviour?


<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"/>
<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>

Here is the demo: http://jsfiddle.net/BA4zM/68/

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

Answer Source

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

    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.