qTip² - 单击时工具提示保持打开状态不起作用

Question

我有以下代码：

给我所有的触发元素 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)

                }

            });

        });

现在的问题是，在我单击我的元素后，我的工具提示没有保持打开状态。它们会在我松开触发元素后消失。

我的代码应该如何表现：当我将鼠标悬停在我的一个触发元素上时，工具提示应该打开。当我用鼠标离开时，工具提示应该会隐藏。

但是当我点击触发元素时，即使我用鼠标离开，工具提示也应该保持打开状态。

Answer 1

也许你可以试试这个：

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

Answer 2

Could you not do this by using the event property of qtip and setting the api? see modified answer.

正如 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

编辑（更新）

还有一个可以尝试的 jsfiddle：http://jsfiddle.net/wHpvW/834/

编辑2

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

解决方法是使用qTip的show事件将hide.event重置为mouseleave（默认）。

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

qTip² - 单击时工具提示保持打开状态不起作用

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

javascript

jquery

html

css

qtip