qTip2 - My test case

by Anam Ansari

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<a href='http://qtip2.com/demos/data/owl'>Owl</a>

CSS

body{
    padding: 50px;
}

.qtip-wiki{
    max-width: 385px;
}

.qtip-wiki p{
    margin: 0 0 6px;
}

.qtip-wiki h1{
    font-size: 20px;
    line-height: 1.1;
    margin: 0 0 5px;
}

.qtip-wiki img{
    float: left;
    margin: 10px 10px 10px 0;
}

.qtip-wiki .info{
    overflow: hidden;
}

.qtip-wiki p.note{
    font-weight: 700;
}

JavaScript

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('href') // Use href attribute as URL
                    })
                    .then(function(content) {
                        // Set the tooltip content upon successful retrieval
                        api.set('content.text', content);
                    }, function(xhr, status, error) {
                        // Upon failure... set the tooltip content to error
                        api.set('content.text', status + ': ' + error);
                    });
        
                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });
 });