Question

我正在使用jquery qtip2 我希望它的行为就像bootstrap工具提示所在

在悬停工具提示中显示，也在DOM
on mouseout工具提示隐藏，也从DOM移除

目的：

我的目标是使用大量的qtips，并且它们在DOM中占用了不必要的空间，我希望qtip2只在它处于活动状态时创建dom元素。

JSFIDDLE： https://jsfiddle.net/bababalcksheep/5unavg0q/4/

似乎无法使其正常工作。默认情况下它不是功能。我错过了Docs中的内容吗？

HTML：

<a href="#test" class="qtiptxt" title="My tooltip text">Hover here!</a>

JS：

$(document).ready(function() {
  $('.qtiptxt').qtip({
    prerender: false,
    overwrite: true,
    hide: {
      event: 'mouseout'
    },
    events: {
      hide: function(event, api) {
        var target = api.elements.target;
        var targetOptions = api.options;
        // Destroy it immediately
        api.destroy(true);
        //re initialize using existing options
        $(target).qtip(targetOptions);
      }
    }
  });
});

Answer 1

似乎我确实错过了文档。这是解决方案

https://jsfiddle.net/bababalcksheep/5unavg0q/7/

$(document).ready(function() {
  // 
  // from https://github.com/qTip2/qTip2/wiki/Events-Guide#delegation-on--live--delegate
  //
  $('.qtiptxt').on('mouseover', function(event) {
    $(this).qtip({
      prerender: false,
      overwrite: true,
      show: {
        event: event.type,
        ready: true
      },
      hide: {
        event: 'mouseout'
      },
      events: {
        hidden: function(event, api) {
          // Destroy it immediately
          api.destroy(true);
        }
      }
    }, event);
  });
  //
  //
});

Qtip隐藏在销毁，显示悬停，Dom清理像bootstrap工具提示

1 个答案: