Loading qtip on page load

Question

ive found a script which hope to modify wish to make the Click FIRST and Click SECOND appear on page load but still hide when click to other elements within the sets, need help

$(document).ready(function () {
$('.set').each(function () {
        $('a[title]', this).qtip({
            position: {
                at: 'bottom center',
                my: 'top center'
            },
            show: 'click',
            hide: {
                event: 'click',
                target: $('a[title]', this)
            }
        });
    });
});

http://jsfiddle.net/ADER8/132/

Thanks!

Answer 1

You can simplify your config, you don't need to use an .each to set up qtip, it will use the title of the context anchor. Also, in you fiddle you linked to the nightly build of qtip, which seems very unstable and api shortcuts methods do not seem to be working. After linking to the stable release it is working with the following code:

// Create the tooltips only when document ready
$(document).ready(function () {

    // First tooltip config
    $('.set a[title]').qtip({
        position: {
            at: 'bottom center',
            my: 'top center'
        },
        show: 'click',
        hide: 'click'
    })
    .click(function() {
        // Hide all tooltips in set except the one that was just clicked
        $(this).closest('.set').find('a[title]').not(this).qtip('hide');
    });

    // Show the first tooltip of each set
    $('.set').find('a[title]:first').qtip('show');

});

jsFiddle Demo