qtip通过点击里面的按钮隐藏工具提示

Question

我在 qtip 工具提示中有一个按钮，单击它会删除目标对象。但在删除目标对象（日历事件）后，工具提示保持可见。如何 remove/hide tooltip 也一样？下面是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/

qtip通过点击里面的按钮隐藏工具提示

qtip hide tooltip by click button inside

javascript

meteor

qtip2