如何检查 JQuery UI 工具提示？

Posted 2023-02-22

【中文标题】如何检查 JQuery UI 工具提示？

【英文标题】：How to inspect JQuery UI tooltip?

【发布时间】：2013-09-19 21:05:28

【问题描述】：

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

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

【问题讨论】：

:hover state in Chrome Developer Tools的可能重复

【参考方案1】：

我找到了一个临时检查它的解决方法：

只需在连接工具提示逻辑的地方实现隐藏设置：

hide: 
          effect: "slideDown",
          delay: 20000
      

这让您有 20 秒的时间来检查它。如果您需要更多时间，请增加“延迟”属性。 这是我的页面 jquery 工具提示的工作代码：

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

完成检查后，只需消除延迟即可完成。

注意：我在检查后使用自定义类“jqueryTooltip”来设置工具提示的样式。

【参考方案2】：

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

【讨论】：

这对我来说就像一个月前一样有效，但现在不行:(一旦我按下热键，工具提示就会消失。我的解决方案是在控制台中运行setTimeout(function()debugger, 1000)，快速切换回来并获取工具提示。

这真的很有用

【参考方案3】：

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

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

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

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

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

【讨论】：

$('.selector').tooltip('show') 用于引导工具提示

好建议。在chrome中，如果没有好的选择器可以使用，也可以在“Elements”中右键元素标记，实时添加ID等属性...

【参考方案4】：

在 Chrome 中执行以下步骤： 1- 打开开发者工具（ Ctrl + Shift + I ）或（右键单击屏幕并选择检查）。

2- 选择来源：

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

4- 你会找到所有的事件，打开“鼠标”，然后选择“mouseout”事件，这将停止执行代码并在“mouseout action”之前停止。

5- 转到应用程序屏幕，并尝试只悬停具有工具提示的项目，然后屏幕将冻结，您会找到所需的工具提示站。

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

在 Firefox 中也一样，不同的是“Sources”标签被命名为“Debugger”。

【讨论】：

谢谢，这是一个很好的方法

最好的方法！

【参考方案5】：

简单的方法是在显示工具提示时按 F8 暂停 js

【参考方案6】：

应该可以修改 CSS 以使工具提示始终可见，而不是仅在悬停时可见，此时您可以通过检查器调整 div 的样式并实时查看它是如何受到影响的。

【讨论】：

是的，但是要修改哪个 CSS？例如，在此页面上：jqueryui.com/tooltip - 如果我想以交互方式设置将鼠标悬停在输入框（“您的年龄”）上时出现的工具提示，该怎么办？据我所知，将鼠标移出不仅会隐藏工具提示，还会将其从 DOM 中删除。

看来，我的解决方案在这里行不通。您可以考虑使用自定义 div 作为工具提示而不是默认标题属性。但是，在我刚刚进行的少量谷歌搜索中，我没有看到这样的选择。

【参考方案7】：

如果您在最新的 Google Chrome 中打开开发者工具，您应该会看到元素选项卡已被选中。在必须悬停的元素上，只需右键单击它并打开“强制元素状态”菜单以选择 :hover 选项。

【讨论】：

这是我尝试的第一件事。但正如我在问题中所写，检查 Inspector 中的“：悬停”状态不会使工具提示出现，它似乎对 javascript 事件没有影响。

【参考方案8】：

您不能在浏览器的检查器中更改 jQuery 工具提示的样式，因为正如您所说，它会在鼠标移出时从 DOM 中删除。 但是，使用以下代码，这是我为更改样式所做的更改：

$("#myElement").attr(
    title: "my tooltip text"
).tooltip();

$("#myElement").tooltip(
    // the .tooltip class is applied by default anyway
    tooltipClass: "tooltip"
);

在 JavaScript 中输入debugger;，在前面的代码之前

在 Firefox 中，按 F12 打开Firebug（如果没有，请下载）

选择脚本标签并点击重新加载

现在调试器已激活，突出显示 $("#myElement").tooltip 来自第二个代码块（没有括号），右键单击突出显示的文本，然后 选择Add Watch

在右侧窗口的观看标签下，点击+ 在$("#myElement").tooltip 旁边展开所有属性

在此展开 Constructor，然后是 DEFAULTS，然后 模板 查看工具提示的 html

这就是 jQuery 工具提示的暴露 HTML 结构：

<div class="tooltip">
    <div class="tooltip-arrow"> ... </div>
    <div class="tooltip-inner"> ... </div>
</div>

...现在您可以应用 CSS，如下所示：

.tooltip 
    background-color: blue;
    border: 2px solid black;
    border-radius: 5px;

.tooltip-arrow 
    /* hackery, placing the arrow where it should be: */
    margin-bottom: -7px;

.tooltip-inner 
    /* hackery, making all browsers render the width correctly: */
    width: 300px;
    min-width: 300px;
    max-width: 300px;

    /* hackery, removing some unknown applied background: */
    background: none;
    background-color: none;

    color: white;
    text-align: center;

上面 CSS 中提到的所有“hackery”都是我必须做的，才能让 Bootstrap 与 jQuery 很好地配合使用（它们都有一个 tooltip，这可能会相互冲突 - - 请参阅https://***.com/a/19247955 了解更多信息）。

【讨论】：

我找到了一些fiddle，添加了调试器命令并手动添加了Watch（右键单击不起作用）。但是，我找不到 Constructor->DEFAULTS->template，这是我看到的结构：s25.postimg.org/7enmrwe9r/img11.jpg

@camcam -- 哇，很奇怪，jsFiddle 似乎增强了任何创建的 JavaScript 对象，因此可能无法以这种方式看到。要重现我所做的，您需要让这段代码在您自己的 HTML 中运行。

我在我的真实网站上检查了这个，但 DEFAULTS-> 模板在任何地方都没有。此外，您发现的工具提示 html 结构与我发现的不同（在我的回答中）。可能 jQuery ui 版本不同（我用的是 1.10）。

【参考方案9】：

这是我所做的：

jQuery(".myDiv").attr("title", 'Hello');
jQuery(".myDiv").tooltip(close: function( event, ui ) 
  console.log(jQuery(ui.tooltip[0]).html());
);

控制台内容是：

<div class="ui-tooltip-content">Hello</div>

另外，我在console.log函数上放了一个断点，然后检查了</body>结束标记之前的页面结构，还有更多：

<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div>

可以使用 Inspector 动态更改工具提示样式（在 Chrome 中测试）。