Как избежать Jquery Qtip появляется несколько раз для одной и той же цели?

Question

У меня есть следующий код, который отображает qtip, совершающий ajax-вызов по клику узла svg.Однако, когда я нажимаю один и тот же элемент (цель) несколько раз, он не загружает qtips для одной и той же цели.Чего мне не хватает?

$(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;
                                    }
                                }
                            });
                        });
                    });

Примечание. Я использую jquery.qtip-1.0.0-rc3.min.js.Любая помощь будет оценена.

Answer 1

Инициализация qtip должна вызываться один раз, а не при событии click Обычно это делается, когда документ загружен.

Подсказка появляется при наведении на элемент.

Обновление

Параметр показа должен быть настроен как:

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

Полная инициализация:

$(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;
            }
        }
    });
});