Bootstrap Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<div class="container">
<div class="hero-unit">
<h3>Tooltip + Knockout Example</h3>
<p>
If you hover <a href="#" data-bind="tooltip: info">this</a>, you should get a knockout observable in your tooltip</p>
</div>
</diV>
JavaScript
ko.bindingHandlers.tooltip = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
$(element).tooltip({
title: valueUnwrapped
});
},
};
var ViewModel = function() {
this.info = ko.observable("This is some extra info that is going to be shown on the tooltip");
};
ko.applyBindings(new ViewModel());