How to avoid Jquery qtip appears multiple times for same target?

Question

I've the following code which displays qtip making ajax call on click of svg node. However when I click the same element (target) multiple times, it loads no of qtips for the same target. What am I missing?

$(document).ready(function() {
                        $('image').click(function() {
                            var $img = $(this);

                            $(this).qtip({
                                content: 'Loading...',
                                style: {
                                    border: {
                                        width: 5,
                                        radius: 10
                                    },
                                    padding: 10,
                                    textAlign: 'center',
                                    tip: true, // Give it a speech bubble tip with automatic corner detection
                                    name: 'cream' // Style it according to the preset 'cream' style
                                },
                                hide: { delay: 2000 },
                                show: {
                                    when: 'click', // Don't specify a show event
                                    ready: true, // Show the tooltip when ready
                                    solo: true
                                },
                                position: {
                                    corner: {
                                        tooltip: 'bottomRight', // Use the corner...
                                        target: 'bottomLeft' // ...and opposite corner
                                    }
                                },
                                api: {
                                    // Retrieve the content when tooltip is first rendered
                                    onRender: function() {
                                        var self = this;
                                        self.content = '';
                                        $.ajax({
                                            url: window.location.href,
                                            type: 'POST',
                                            data: 'call=ajax&uid=' + $img.attr('data-uid'),
                                            success: function(resp) {
                                                self.updateContent(resp);
                                            }
                                        });
                                    },
                                    onContentUpdate: function() {
                                        var self = this;
                                    }
                                }
                            });
                        });
                    });

Note : I am using jquery.qtip-1.0.0-rc3.min.js. Any help would be appreciated.

Answer 1

The qtip initialization should be invoked once, and not on the click event. It's typically done when the document has been loaded.

The tip appears when you hoover an element.

Update

The show option should be configured as:

show: {
  when: {
      event: 'click'
  }
}

Complete initialization:

$(function() {
    $('image').qtip({
        content: 'Loading...',
        style: {
            border: {
                width: 5,
                radius: 10
            },
            padding: 10,
            textAlign: 'center',
            tip: true, // Give it a speech bubble tip with automatic corner detection
            name: 'cream' // Style it according to the preset 'cream' style
        },
        hide: { delay: 2000 },
        show: {
            when: {
                event: 'click'
            }, 
            ready: true, // Show the tooltip when ready
            solo: true
        },
        position: {
            corner: {
                tooltip: 'bottomRight', // Use the corner...
                target: 'bottomLeft' // ...and opposite corner
            }
        },
        api: {
            // Retrieve the content when tooltip is first rendered
            onRender: function() {
                var self = this;
                self.content = '';
                $.ajax({
                    url: window.location.href,
                    type: 'POST',
                    data: 'call=ajax&uid=' + $img.attr('data-uid'),
                    success: function(resp) {
                        self.updateContent(resp);
                    }
                });
            },
            onContentUpdate: function() {
                var self = this;
            }
        }
    });
});