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

【问题标题】：How to make a button hide a qtip tooltip?如何使按钮隐藏 qtip 工具提示？
【发布时间】：2016-10-19 15:04:15
【问题描述】：

页面上有 2 张图片（内嵌 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'
}
});

【问题讨论】：

标签： jquery qtip2

【解决方案1】：

您是否考虑过使用qtip.destroy() 与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);

【讨论】：

我在上面添加了一些代码。我应该把"$(".qtip").remove();"放在哪里？我不明白：有没有办法将 close 方法绑定到任何元素？
在“style”之后添加了你的sn-p，现在看起来像这样：style: { classes: 'border-radius' }, events: { render: function () { }, hide: function (事件, api) { var $qtip = api; $qtip.destroy(); }，显示：函数（）{}}
@user3601990 我已经为你添加了一个完整的示例。

【解决方案2】：

我已添加：

...

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

但不起作用。

【讨论】：