4

I need to show a dynamic Bootstrap tooltip on a button that explains why the button is disabled (ie. "Fill out your name/address/phone", or some variation). I'm using Bootstrap/jQuery/KnockoutJS for the project.

I was having problems showing the Bootstrap tooltip on a disabled button and found through some Googling that this is due to the fact that the underlying button events are not being fired (since the button is disabled, the Bootstrap tooltip doesn't work. D'oh!).

I'm using KnockoutJS with click bindings to handle button events.

Issue: Does anyone know of a clean/succinct way to disable button click events when the button is enabled and contains a specific CSS class (ie. btn-disabled) - so that the KnockoutJS click event is not called, but the tooltip still shows up?

Sample of non-working code:

Note that with the enable:false data-bind attribute, the tooltip will not show up. I was trying to recreate the behavior with style/event handling, but not really disable the control:

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>

...

    <button id="testButton"
            class="btn btn-default"
            data-bind="click: clickTest, enable:false"
            data-toggle="tooltip"
            data-placement="left"
            data-original-title="Test tool tip">
        Test Button
    </button>

Script:

<script type="text/javascript">

    function TestViewModel() {
        var self = this;        
        self.clickTest = function () {
            console.debug("Test button has been clicked");
        };
    }

    var testViewModel = new TestViewModel();

    $(document).ready(function () {
        $('#testButton').tooltip();
        console.debug("document ready");
        ko.applyBindings(testViewModel);        
    });

</script>
b4hand
  • 9,550
  • 4
  • 44
  • 49
Sean
  • 306
  • 2
  • 17

2 Answers2

3

Did you overlook this section of the docs?:

Tooltips on disabled elements require wrapper elements

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div>instead.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
  • Hah, when I replied to that for some reason it made me think - wait a sec, when I tried the tooltip on the div, did I remember to call $("...").tooltip(); on the div, which - no I did not. Whoops! That did in fact fixed. thanks! – Sean Dec 16 '14 at 19:42
0

This may not be the cleanest way, but if your button is represented in your ViewModel, its states could be represented in the ViewModel as well:

var self = this;
var buttonIsDisabled = ko.observable('true');
self.clickTest = function() {
     if (self.isDisabled()) {
         $('#testButton').tooltip('show')
     }
}

Alternatively, maybe you could take the button element and initially give it a class like showTooltip. Whenever the button becomes disabled, you could toggle its class to something like dontShowTooltip, and you could check to see which class it has in self.clickTest().

This won't disable the button click event, but you may not have to.

alex
  • 6,818
  • 9
  • 52
  • 103
  • My only issue w/ that is then all of my click handlers need to look at the view model to determine if the button is 'enabled' or not, if it is - do some stuff, it not don't. I'm trying to figure out something where I can avoid that. Thanks though, the route you mentioned above was in fact my fall back plan. – Sean Dec 16 '14 at 19:04
  • I know what you're talking about - it doesn't feel like a clean solution. This method *might* however be consistent with [MVVM patterns](http://stackoverflow.com/questions/5421874/basic-concepts-of-mvvm-what-should-a-viewmodel-do) because your client-side ViewModel would be describing the functionality of buttons/tooltips on the View. [This link might help](http://stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button) if you don't want to go that route. I hope this helps - and please take my advice with a grain of salt. I'm a beginner! – alex Dec 16 '14 at 19:09