Блог

На странице есть 2 картинки (встроенный svg), которые переключаются кнопками. При нажатии на кнопку вместо первой появляется вторая картинка. Нажмите кнопку далее — снова появится первая картинка. На обоих изображениях есть всплывающие подсказки qtip. Проблема в том, что: я открываю всплывающую подсказку (щелчок по полигону на картинке) на 1-м изображении, а затем переключаю второе изображение — всплывающая подсказка 1-го изображения не исчезает.

Пытался привязать событие «скрыть» к кнопке:

   $('.btn-green').qtip('hide');
  

Пробовал это:

 $(".btn-green").on("mouseenter", "polygon.qtip-close", function(){
        $('polygon').qtip('api').hide();
});
  

Вот код, который показывает всплывающую подсказку после щелчка по полигону или контуру изображения:

 $('path.gipermarket, polygon.gipermarket').qtip({
content: {
    text: 'some content',
    button: 'Close'</div>'
},
show: {
    event: 'click',
    solo: true,
},
hide: {
    event: 'click'
},
// hide: {
//     leave: false
// },

position: {
    /*my: 'bottom center',
    at: 'top left'*/
    my: 'bottom center',
    at: 'center center'
},
style: {
    classes: 'border-radius'
}
});
  

Рассматривали ли вы возможность использования qtip.destroy() verus hide() ?

Или $(".qtip").remove() ;

Обновите свой код примерно так

     events: {
        render: function () { },
        hide: function (event, api) {
            var $qtip = api;
            $qtip.destroy();
        },
        show: function () { }
    },
  

Вот полное определение qtip

 $target.qtip({
            style: {
                //width: 350,
                classes: 'qtip-largerText'
            },
            id: 'YouQtipID',
            content: {
                global: false,
                text: function (event, api) {
                    api.set('content.text', 'Loading...');
                    return $.ajax({
                        url: '/whatever',
                        data: { SetID: setid, Abbv: abv },
                        type: 'POST',
                    }).then(
                        function (data) {
                            api.set('content.text', data);
                        }, function (xhr, status, error) {
                            var $qtip = api;
                            $qtip.destroy();
                        });
                },
                title: {
                    text: 'Set',
                    button: false
                }
            },
            position: {
                my: 'top left',
                at: 'left top',
                target: $target,
                viewport: $(window)
            },
            show: {
                delay: 500,
                event: event.type,
                ready: true,
                modal: false,
                solo: true
            },
            events: {
                render: function () { },
                hide: function (event, api) {
                    var $qtip = api;
                    $qtip.destroy();
                },
                show: function () { }
            },
        }, $target);
  

Я добавил:

 ...

events: {
    show: function() {
        $('.btn-green').one("click", function() { $(".odezhda-i-belyo").qtip('hide'); });
    }
},
....
  

Но не работает.