如何检查JQuery UI工具提示？

Question

我的页面上有一个默认的JQuery UI工具提示函数调用.有没有办法使用Inspector以交互方式设置工具提示div的样式？如果我有两个鼠标指针,一个将悬停在一个元素上以保持工具提示显示,第二个将使用Inspector并构建样式.但我只有一只鼠标,一旦它移出元素,工具提示就会消失.检查Inspector中的":hover"状态没有帮助.鼠标移出时工具提示消失.

我正在使用Chrome,但任何浏览器中的任何技巧都可以.

Answer 1

在 Chrome 中，请按照以下步骤操作： 1- 打开开发人员工具 ( Ctrl + Shift + I ) 或（右键单击屏幕并选择检查）。

2- 选择来源：

3-在右侧，您找到了手风琴，打开“事件侦听器断点”

4-您将找到所有事件，打开“鼠标”，然后选择“鼠标移出”事件，这将停止执行代码并在“鼠标移出操作”之前停止。

5-转到应用程序屏幕，并尝试仅将鼠标悬停在具有工具提示的项目上，然后屏幕将冻结，您将找到所需的工具提示支架。

注意：如果您错误地将鼠标悬停在其他项目上，您可以通过单击恢复（蓝色按钮）来恢复代码的执行，然后再次尝试悬停。如果要返回到代码的正常执行，请取消选择“mouseout”事件，然后单击恢复（蓝色按钮）。

在 Firefox 中同样如此，“Sources”选项卡中的差异被命名为“Debugger”。

Answer 2

我找到了一种解决方法,如何临时检查它:

只需实现隐藏设置,您可以在其中连接工具提示逻辑:

hide: {
          effect: "slideDown",
          delay: 20000
      }

这让你有20秒的时间来检查它.如果您需要更多时间,请增加"延迟"属性.这是我的页面jquery工具提示的工作代码:

    $(function() {
    $(document).tooltip({
            tooltipClass: "jqueryTooltip",
            content: function() {
                return $(this).attr('title');
            },
            hide: {
                effect: "slideDown",
                delay: 20000
            }
        });
    });

完成检查后,只需删除延迟即可完成.

注意:我在检查后使用自定义类"jqueryTooltip"来设置工具提示的样式.

Answer 3

我迟到了，但实际上有一个简单的方法可以做到这一点。

在浏览器的开发控制台中，使用 jQuery 定位工具提示，如下所示：

$('.selector').tooltip('open');

例如，就我而言，.grey-tooltip我的工具提示上有一个类，因此我调用$('.grey-tooltip').tooltip('open');. 这应该会打开工具提示，然后您可以像检查任何其他可见元素一样检查它们。

您可以使用一个工具提示的不同方法在他们的文档中进行了描述：https : //api.jqueryui.com/tooltip/。

Answer 4

我在Firefox中可以使用的解决方案：
1.将鼠标悬停在工具提示上（显示工具提示）
。2.按下CMD-Option-K（OSX）或CTRL-Shift-K（Windows），打开“ Web控制台”
。3.键入“调试器”（这将停止JS执行，因此工具提示将不会' t消失）
4.打开“检查器”选项卡，搜索.ui-tooltip
5.根据需要进行编辑。注意：即使停止执行JavaScript，对CSS的更改也将立即生效