qTip2 - Demo - Simple Integration

Replace the default browser tooltips with qTip.

by gene

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="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<span data-bind="test: docs"></span>

CSS

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

JavaScript

var docs = [{title: 'Doc 1'}, {title: 'Doc 2'}];


ko.bindingHandlers.test = {
    init: function(element, valueAccessor) {
        var docs = ko.utils.unwrapObservable(valueAccessor());
        var nDocs = docs.length;
        
        var label = nDocs == 1 ? " doc" : " docs"; 
        var toolTipText = '';
        for (var i=0; i<nDocs; i++) {
            var doc = docs[i];
            toolTipText += '<p>' + doc.title + "</p>";
        }
        $(element)
            .addClass('withdocs')
            .text("with " + docs.length + label)
             .qtip({
                content: {
                    text: toolTipText,
                    title: {
                        text: 'Documents used in query'
                    }
                }, /*
                position: {
                    at: 'bottom center', // Position the tooltip above the link
                    my: 'top center',
                    viewport: $(window), // Keep the tooltip on-screen at all times
                    effect: false // Disable positioning animation
                 }, 
                 show: {
                    event: 'mouseover',
                    ready: true,
                    solo: true // Only show one tooltip at a time
                 },*/
                 show: 'mouseover',
                 hide: 'unfocus',
                 style: {
                    classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
                 }
            });
    }
};
    
var vm = {
    docs: ko.observableArray(docs)
}
    
    ko.applyBindings(vm);