javascript - qtip 通过单击里面的按钮隐藏工具提示

Question

我在 qtip 工具提示中有一个按钮，可以在单击它时删除目标对象。但删除目标对象(日历事件)后工具提示保持可见。如何删除/隐藏工具提示？下面是 qtip 选项和屏幕截图。


var content = '<button class="btn btn-xs btn-default delCalendarEvent" id="' + event._id + '"><i class="fa fa-trash"></i></button>';
element.qtip({
show: {
event: 'click',
solo: true
},
hide: {
event: 'click unfocus'
},
content: content,
style: {
classes: 'qtip-bootstrap'
},
position: {
my: 'bottom center',
at: 'top center',
container: $('.fc')
}
});


Answer 1

您可以尝试使用函数生成内容，如下所示:

  $('a[title]').qtip({show: {
        event: 'click',
        solo: true
    },
    hide: {
        event: 'click unfocus'
    },
    content: function() { 
      var context = this.context;
      var btn = $('<button class="btn btn-xs btn-default delCalendarEvent" id="55">X</button>');
      btn.click(function () { 
        $(context).qtip().destroy();
        $(context).remove();
      })
      return btn;
    },
    style: {
        classes: 'qtip-bootstrap'
    },
    position: {
        my: 'bottom center',
        at: 'top center',
        container: $('.fc')
    }
  });

JSFiddle:http://jsfiddle.net/tnmj7w1p/