qTip2隐藏-组合无焦点、非活动和固定

qTip2 hiding - combine unfocus, inactive and fixed

本文关键字：非活动 无焦点 隐藏 组合 qTip2      更新时间：2023-09-26

我使用qTip2作为工具提示。我希望此工具提示隐藏行为：
-单击标题（button: true）上的关闭按钮时，toopltip隐藏
-单击页面上的其他位置时工具提示将隐藏（event: 'unfocus'）
-当我在3秒钟内不与工具提示交互时（inactive: 3000），工具提示将隐藏，但仅当我的鼠标光标不在工具提示（fixed: true）上时

按下关闭按钮时隐藏是可以的：

content: {
    title: {
        button: true
    }
}

不对焦时隐藏也可以：

hide: { 
    event: 'unfocus'
}

当我不与它互动时隐藏仍然没有问题：

hide: { 
    event: 'unfocus',
    inactive: 3000
}

现在，我可以通过单击页面上的其他位置、关闭按钮或在工具提示上不移动鼠标3秒钟来关闭工具提示。但是，当我的鼠标在工具提示上，并且在3秒钟内没有移动时，工具提示也会关闭——这是不可取的。

为了在鼠标悬停在工具提示上时保持可见，我可以使用以下内容：

hide: { 
    fixed: true,
    delay: 3000
}

现在，当鼠标不在工具提示上3秒钟时，它就会关闭。但当我点击页面上的其他地方时就不会了。因此，让我们将unfocus和fixed:结合起来

hide: { 
    event: 'unfocus',
    fixed: true,
    delay: 3000
}

现在，当我单击页面上的其他位置时，它将关闭，但在离开工具提示3秒钟后不会关闭。因此，让我们尝试添加inactive:

hide: { 
    event: 'unfocus',
    inactive: 3000,
    fixed: true,
    delay: 3000
}

现在，当我单击页面上的其他位置时，它将关闭，在离开工具提示3秒钟后，也在我在工具提示上处于非活动状态3秒钟后。

当我单击页面上的其他位置并在离开工具提示3秒后关闭工具提示时，但当我仍在工具提示上时，如何关闭

我也有类似的需求，正如xr280xr所提到的，我看到的唯一解决方案是自己实现"unfocus"部分。所以你最终的配置是：

$el.qtip({
  content: {
    title: {
      button: true
    }
  },
  hide: {
    fixed: true,
    delay: 3000
  }
})

然后实现失焦行为：

var api = $el.qtip('api');
$el.closest('html').on('mousedown touchstart', function(e) {
    api.hide(e)  
});

在小提琴中：http://jsfiddle.net/pvanb/n04qL8jg/

相关文章：