qTip2 - My test case

by glebcha

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
    <button class="nice">Create a regular qTip Growl</button>
    <button class="nice persistent">Create a persistent qTip Growl</button>
    <div class="clear">&nbsp;</div>

CSS

body{
    padding: 100px 50px 600px;
}

.jgrowl{
    position: fixed;
}

JavaScript

$(document).ready(function() {
    $('button').click(function() {
        // Check if it should be persistent (can set to a normal bool if you like!)
        createGrowl($(this).hasClass('persistent'));
    });

    window.createGrowl = function(persistent) {
        // Use the last visible jGrowl qtip as our positioning target
        var target = $('.qtip.jgrowl:visible:last');

        // Create your jGrowl qTip...
        $(document.body).qtip({
            // Any content config you want here really.... go wild!
            content: {
                text: 'Testing out our jGrowl implementation (persistent: ' + persistent + ')',
                title: {
                    text: 'Attention!',
                    button: true
                }
            },
            position: {
                my: 'bottom right',
                // Not really important...
                at: (target.length ? 'top' : 'bottom') + ' right',
                // If target is window use 'top right' instead of 'bottom right'
                target: target.length ? target : $(window),
                // Use our target declared above
                adjust: { y: -5 },
                effect: function(api, newPos) {
                    // Animate as usual if the window element is the target
                    $(this).animate(newPos, {
                        duration: 200,
                        queue: false
                    });

                    // Store the final animate position
                    api.cache.finalPos = newPos; 
                }
            },
            show: {
                event: false,
                // Don't show it on a regular event
                ready: true,
                // Show it when ready (rendered)
                effect: function() {
                    $(this).stop(0, 1).fadeIn(400);
                },
                // Matches the hide effect
                delay: 0,
                // Needed to prevent positioning issues
       ...