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时，我希望工具提示保持打开状态：

$('.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

你能不能通过使用qtip的event属性并设置api来做到这一点？见修改后的答案。

正如Rotan075所提到的，使用qTip的API发生了神奇的事情。您可以将窗口小部件分配给每个元素，并绑定Query connection 1 Query connection 2 16:17:02.955 INFO h2database - jdbc[3] /**/Connection conn2 = DriverManager.getConnection("jdbc:h2:mem:tracetest", "", ""); 16:17:02.958 DEBUG h2database - jdbc[3] /**/Statement stat2 = conn2.createStatement(); 16:17:02.959 DEBUG h2database - jdbc[3] /**/stat2.execute("SELECT 1"); 16:17:02.959 INFO h2database - jdbc[3] /*SQL #:1*/SELECT 1; Query connection 1 again End事件处理程序。

例如：

click

通过这种方式，您可以处理每个qTip，使其显示在$([selector]).qtip(); $([selector]).click(function() { var api = $(this).qtip('api'); api.set('hide.event', false); });上。如果您使用mouseenter，则需要为delay和show.event设置mouseenter选项，或使用单独的事件处理程序立即显示qTip

修改（更新）

也是一个尝试它的方法：http://jsfiddle.net/wHpvW/834/

<强> EDIT2

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

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

mouseleave

Answer 2

也许你可以试试这个：

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

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

2 个答案: