javascript 如何检查 JQuery UI 工具提示？

How to inspect JQuery UI tooltip?

提问by camcam

I have a default JQuery UI tooltip function call on my page. Is there a way to style the tooltip div interactively using the Inspector? If I had two mouse pointers, one would be hovering over an element to keep the tooltip displayed and second would be using the Inspector and build the style. But I only have one mouse and as soon as it moves off the element, the tooltip disappears. Checking the ":hover" state in Inspector doesn't help. the tooltip disappears on mouse out.

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

I am using Chrome, but any trick in any browser would do.

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

采纳答案by maosmurf

My working solution in Firefox:
1. hover over tooltip (tooltip is shown)
2. hit CMD-Option-K(OSX) or CTRL-Shift-K(Windows), to open "Web Console"
3. type "debugger" (this will stop JS execution, so tooltip won't disappear)
4. open "Inspector" Tab, search for .ui-tooltip
5. edit as necessary. note: changes to CSS will work immediately, even if execution of JavaScript is stopped

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

回答by user3199365

I found a workaround how to temporary inspect it :

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

just implement hide settings where you hookup the tooltip logic:

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

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

This gives you 20 sec time to inspect it. If you need more time then increase the "delay" attribute. Here is my working code for page jquery tooltips:

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

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

After you are done with the inspection just remove the delay and you are done.

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

Note: I am using custom class "jqueryTooltip" to style the tooltip after inspection.

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

回答by AnnieP

I'm late to the party, but there is actually a simple way to accomplish this.

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

In your browser's dev console, use jQuery to target the tooltip as follows:

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

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

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

In my case, for instance, I have a class .grey-tooltipon my tooltip, so I call $('.grey-tooltip').tooltip('open');. This should open the tooltips and you can then inspect them as you would any other visible element.

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

Different methods you can use one tooltips are described in their docs here: https://api.jqueryui.com/tooltip/.

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

回答by Aref Ben Lazrek

the easy way is to pause js with F8 when tooltip is shown

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

回答by Muhammed AbdElFatah

In Chrome follow the following steps: 1- Open Developers Tools ( Ctrl + Shift + I ) or (right click on screen and select inspect).

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

2- Choose Sources:

2- 选择来源：

3- On the right side, you found accordion, Open "Event Listener Breakpoints"

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

4- You will found all events, Open "Mouse", then Select "mouseout" event, this will stop execution of code and stop before "mouseout action".

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

5- Go to App screen, and Try to hover only the item which has the tooltip, then screen will freeze, and you will found the tooltip stand as you want.

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

Note: If you hovered other item by wrong, you can resume the execution of code by clicking resume (blue button), and then try hover again. If you want to return to the normal execution of code, Deselect the "mouseout" event, and click resume (blue button).

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

In Firefox the same, the difference in "Sources" tab is named "Debugger".

在 Firefox 中相同，“Sources”选项卡中的不同之处是将其命名为“Debugger”。

回答by Carter

It should be possible to modify the CSS such that the tool tip is always visible as opposed to on hover only, at which point you could tweak the div's styling via the inspector and see how it's affected real-time.

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

回答by 123

If you open the developer tools in the newest Google Chrome you should see the elements tab is selected. On the element you have to hover on you just right click on it and open the 'Force element state' menu to select the :hover option.

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

回答by Ian Campbell

You can't change a jQuery tooltip's styling in a browser's inspector, because as you are saying it is removed from the DOM on mouseout.

However, with the following code this is what I did to change to change the styling:

您无法在浏览器的检查器中更改 jQuery 工具提示的样式，因为正如您所说，它已在鼠标移出时从 DOM 中删除。

但是，使用以下代码，这是我为更改样式所做的更改：

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

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

1. Type debugger;in the JavaScript, before the previous code

2. In Firefox, hit F12to open Firebug(download it if you don't have it)

3. Select the Scripttab and click Reload

4. Now that the debugger is activated, highlight $("#myElement").tooltipfrom the 2nd code block (withoutthe parentheses), right-click the highlighted text, and select Add Watch

5. Under the Watchtab in the right window, click on +next to $("#myElement").tooltipto expand all the properties

6. Under that expand Constructor, then DEFAULTS, and then templateto see the HTML that the tooltip is made of

1. 键入debugger;在JavaScript中，前面的代码之前

2. 在 Firefox 中，点击F12打开Firebug（如果没有，请下载）

3. 选择脚本选项卡，然后单击重新加载

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

5. 在右侧窗口的Watch选项卡+下，单击next $("#myElement").tooltipto 展开所有属性

6. 在该下展开Constructor，然后是DEFAULTS，然后是 模板以查看工具提示所包含的 HTML

This is then the exposed HTML structure of a jQuery tooltip:

这是 jQuery 工具提示的公开 HTML 结构：

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

...and now you can apply CSS, something like this:

...现在您可以应用 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;
}

All the "hackery" mentioned in the CSS above is what I had to do to get Bootstrap to play nicely with jQuery (they both have a tooltip, which can conflict with each other -- see https://stackoverflow.com/a/19247955for more info).

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

回答by camcam

Here is what I did:

这是我所做的：

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

And the console content was:

控制台内容是：

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

Also, I placed a breakpoint on the console.logfunction and then examined the page structure before the </body>end tag, and there was something more:

此外，我在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>

It was possible to change the tooltip styling on the fly using Inspector (tested in Chrome).

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