qTip& # 178;-工具提示保持打开时，点击不起作用

qTip² - Tooltip keep opened when clicked doesn't work

本文关键字：不起作用 工具提示 qTip      更新时间：2023-09-26

我有以下代码:

给我所有的触发器元素qTip-widget:

$('.trigger_element').each(function() {
            $(this).qtip({
                content:  $(this).find('.trigger_element_content').html(),
                hide:     {
                    fixed: true,                // Keep open when mouse is over tooltip.
                    delay: 150,                 // Close after 150ms. Necessary for keeping open when moving mouse from trigger element to tooltip.
                    effect: function() {
                        $(this).fadeOut(200)
                    }
                },
                show: {
                    effect: function() {
                        $(this).fadeIn(200);
                    }
                },
                position: {
                    viewport: true,         // Only showing tooltip in a visible area.
                    my: 'top center',       // Setting anchor of tooltip.
                    at: 'bottom center',    // Placing the tooltip to trigger element.
                    collision: 'flip'       // Flipping tooltip to opposite site when it doesn't fit.
                }
            });
        });

现在我想让工具提示保持打开当我点击我的触发器元素:

$('.trigger_element').click(function() {
            $(this).qtip('option', {
                hide: {
                    event: false,
                    // Although our target "$(this)" is known, qTip2 got a bug here.
                    // If we omit the target option, qTip2 will throw an error
                    // wich says that our target is undefined.
                    target: $(this)
                }
            });
        });

现在的问题是，我的工具提示不保持打开后，我点击我的元素。当我取消对触发器元素的聚焦后，它们就会消失。

我的代码应该如何表现:当我将鼠标悬停在其中一个触发器元素上时，工具提示应该打开。当我带着鼠标离开时，工具提示应该隐藏起来。

但是，当我点击我的触发器元素，工具提示应该保持打开，即使我离开我的鼠标

你可以通过使用qtip的事件属性和设置api来做到这一点吗?见修改后的答案

正如Rotan075所提到的，使用qTip的API可以实现神奇的功能。您可以将小部件分配给每个元素，还可以绑定click事件处理程序。

例如:

$([selector]).qtip();
$([selector]).click(function() {
  var api = $(this).qtip('api');
  api.set('hide.event', false);
});

这样你可以处理每个qTip，所以它会出现在mouseenter上。如果您使用delay，则需要将show.event选项设置为mouseenter和click，或者使用单独的事件处理程序立即显示qTip

编辑(更新)

也可以试试:http://jsfiddle.net/wHpvW/834/

Edit2

注意到工具提示的默认mouseleave行为有一个小问题。如果将hide.event设置为false，则每次打开工具提示时，它将保持打开状态。所以我已经更新了jsfiddle来覆盖它。

解决方案是使用qTip的show事件将hide.event重置为mouseleave(默认)。

$([selector]).qTip({
    events: {
        show: function() {
            $([selector]).qtip('api').set('hide.event', 'mouseleave');
        )
    }
});

也许你可以试试这个:

events: {
            render: function(event, api) {
                $(api.elements.target).bind('click', function(e) {
                    api.show();
                });
            }
        }
相关文章：