javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-tooltip

How to enable Bootstrap tooltip on disabled button?


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>

Here is a demo

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


Solution

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

    $('body').tooltip({
        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.