Question

页面上有两个按钮切换的图片（内联svg）。单击按钮时，第二张图片将显示为第一张图片。单击下一步按钮 - 再次出现第一张图片。两张图片都有qtip工具提示。问题是：我在第一张图片上打开工具提示（点击图片上的多边形），然后切换第二张图片 - 第一张图片的工具提示不会消失。

尝试将“隐藏”事件绑定到按钮：

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

Answer 1

您是否考虑过使用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);

Answer 2

我添加了：

...

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

但是不起作用。

如何使按钮隐藏qtip工具提示？

2 个答案: