jquery - KnockoutJS event binding on disabled Bootstrap 3 button with tooltip -


i need show dynamic bootstrap tooltip on button explains why button disabled (ie. "fill out name/address/phone", or variation). i'm using bootstrap/jquery/knockoutjs project.

i having problems showing bootstrap tooltip on disabled button , found through googling due fact underlying button events not being fired (since button disabled, bootstrap tooltip doesn't work. d'oh!).

i'm using knockoutjs click bindings handle button events.

issue: know of clean/succinct way disable button click events when button enabled and contains specific css class (ie. btn-disabled) - knockoutjs click event not called, tooltip still shows up?

sample of non-working code:

note enable:false data-bind attribute, tooltip not show up. trying recreate behavior style/event handling, not disable 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> 

did overlook section of docs?:

tooltips on disabled elements require wrapper elements

to add tooltip disabled or .disabled element, put element inside of <div> , apply tooltip <div>instead.


Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -