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
Post a Comment