qTip - knockoutjs integration

Shows how a qtip can be injected via a knockoutks binding

HTML

<script src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/demos.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/master.css">
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.debug.js"></script>
<ul data-bind="foreach: queries">
    <li class="query" data-bind="click: select">
        <span data-bind="text: text"></span>
        <span data-bind="withdocs: positive"></span>
    </li>
</ul>
<button data-bind="click: update">Update</button>

CSS

.withdocs {
    font-size: 8pt;
    font-weight: bold;
    color: darkgrey;
}

JavaScript

var docs1 = [{title: 'Doc 1'}, {title: 'Doc 2'}, {title: 'Doc 27'}];
var docs2 = [{title: 'Doc a'}, {title: 'Doc b'}, {title: 'Doc c'}, {title: 'Doc xyz'}];

var queryList = [{text: ko.observable('query 1'), 
                      positive: ko.observableArray(docs1), 
                      select: function() { console.log('click'); return true;}},
               {text: ko.observable('query 2'), 
                      positive: ko.observableArray(docs2), 
                      select: function() { console.log('click'); return true;}}
                    ];

function getTooltipText(docs) {
    var toolTipText = '';
    for (var i=0; i<docs.length; i++) {
        toolTipText += '<p>' + docs[i].title + "</p>";
    }
    return toolTipText;
}

ko.bindingHandlers.withdocs = {
    init: function(element, valueAccessor) {
            var docs = ko.utils.unwrapObservable(valueAccessor());
            var nDocs = docs.length;
            console.log(docs);
            if (nDocs > 0) {
                var label = nDocs == 1 ? " doc" : " docs"; 
                $(element)
                    .addClass('withdocs')
                    .text("with " + docs.length + label)
                    .qtip({
                        content: {
                            text: getTooltipText(docs),
                            title: {
                                text: 'Documents used in query'
                            }
                        }, 
                         show: {
                            event: 'mouseover',
                            solo: true // Only show one tooltip at a time
                         },
                         hide: 'unfocus',
                         style: {
                            classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
                         }
                    })
            }
    },
    update: function(element, valueAccessor) {
            var docs = ko.utils.unwrapObservable(valueAccessor());
         ...