Geek Answers Handbook

KnockoutJS event binding with disabled Bootstrap 3 button with tooltip

I need to show the Bootstrap dynamic tooltip on a button that explains why the button is disabled (for example, "Fill in your name / address / phone number" or some other option). I am using Bootstrap / jQuery / KnockoutJS for a project.

I am having problems displaying the Bootstrap tooltip on a disabled button and found through some kind of Google that this is due to the fact that the main events of the buttons do not start (since the button is disabled, the Bootstrap tooltip does not work D'oh!).

I am using KnockoutJS with click bindings to handle button events.

Problem . Does anyone know of a clean / compressed way to disable button click events when a button is on. and contains a specific CSS class (i.e. btn-disabled) - so that the Click KnockoutJS event is not raised, but the tooltip is still displayed?

Sample non-working code:

Note that with the enable:falsedata binding attribute, a tooltip will not be displayed. I tried to recreate the behavior with the style / event handling, but did not 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>
+4
source share
2 answers

Have you missed this section of the docs ?:

Tooltips for disabled items require shell items

disabled .disabled, <div> <div>.

+3

, ​​ ViewModel, ViewModel:

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

, , showTooltip. , , dontShowTooltip, , self.clickTest().

, .

0

More articles:


All Articles