Twitter Bootstrap tooltip + Knockout

A sample of a custom binding in Knockout that gives you a nice tooltip

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>, yu should get a knockout observable in your tooltip</p>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

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());