Qtip not working with knockout

Question

I am using Qtip in my template page.

<a href="details.html" class="qtipselector">Intro</a>

In the main page i have included the library:

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<!--Template binding-->
<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                   
</div>
<script src="Scripts/abc.js"></script>

and this function is there in custom library abc.js

$('.qtipselector').qtip({
    content: $('div#TooltipContent').html(),
    position: {
        my: 'left center', 
        at: 'center right'
    },
    show: 'mouseenter',
        hide: {
            fixed: true,
            delay: 500,

            when: {
                event: 'unfocus'
            }
        },
    style: {
        tip: {
          width: 20,
          height: 14,
        },
        width:280,
        height:100,    
        classes: 'qtip-light qtip-shadow qtip-rounded',

    }
});

When i load the main page, i'm getting this error: Uncaught TypeError: Object [object Object] has no method 'qtip' (anonymous function)

How can i make sure that the qtip library is loaded after the template binding.

Answer 1

Generally, a good way to do this is through Custom Bindings in Knockout.

Here's the tutorial on it on the Knockout site: http://learn.knockoutjs.com/#/?tutorial=custombindings

And the documentation: http://knockoutjs.com/documentation/custom-bindings.html