我的页面上有一个默认的 JQuery UI 工具提示函数调用。有没有办法使用 Inspector 以交互方式设置工具提示 div 的样式？如果我有两个鼠标指针，一个将悬停在一个元素上以保持工具提示显示，第二个将使用 Inspector 并构建样式。但是我只有一只鼠标，一旦它离开元素，工具提示就会消失。在 Inspector 中检查 ":hover" 状态并没有帮助。鼠标移出时工具提示消失。
我正在使用 Chrome，但任何浏览器中的任何技巧都可以。
【问题讨论】：
我找到了一个临时检查它的解决方法：
只需在连接工具提示逻辑的地方实现隐藏设置：
hide: {
effect: "slideDown",
delay: 20000
}
这让您有 20 秒的时间来检查它。如果您需要更多时间，请增加“延迟”属性。 这是我的页面 jquery 工具提示的工作代码：
$(function() {
$(document).tooltip({
tooltipClass: "jqueryTooltip",
content: function() {
return $(this).attr('title');
},
hide: {
effect: "slideDown",
delay: 20000
}
});
});
完成检查后，只需消除延迟即可完成。
注意：我在检查后使用自定义类“jqueryTooltip”来设置工具提示的样式。
【讨论】：
我在 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)，快速切换回来并获取工具提示。
我迟到了，但实际上有一个简单的方法可以做到这一点。
在浏览器的开发控制台中，使用 jQuery 来定位工具提示，如下所示：
$('.selector').tooltip('open');
例如，在我的工具提示上有一个类.grey-tooltip，所以我调用$('.grey-tooltip').tooltip('open');。这应该会打开工具提示，然后您可以像检查任何其他可见元素一样检查它们。
您可以使用一个工具提示的不同方法在他们的文档中进行了描述：https://api.jqueryui.com/tooltip/。
【讨论】：
$('.selector').tooltip('show') 用于引导工具提示
在 Chrome 中执行以下步骤： 1- 打开开发者工具（ Ctrl + Shift + I ）或（右键单击屏幕并选择检查）。
4- 你会找到所有的事件，打开“鼠标”，然后选择“mouseout”事件，这将停止执行代码并在“mouseout action”之前停止。
5- 转到应用程序屏幕，并尝试只悬停具有工具提示的项目，然后屏幕将冻结，您会找到所需的工具提示站。
注意：如果您错误地悬停了其他项目，您可以通过单击恢复（蓝色按钮）来恢复代码的执行，然后再次尝试悬停。 如果要恢复代码的正常执行，请取消选择“mouseout”事件，然后单击恢复（蓝色按钮）。
在 Firefox 中也一样，不同的是“Sources”标签被命名为“Debugger”。
【讨论】：
简单的方法是在显示工具提示时按 F8 暂停 js
【讨论】：
应该可以修改 CSS 以使工具提示始终可见，而不是仅在悬停时可见，此时您可以通过检查器调整 div 的样式并实时查看它是如何受到影响的。
【讨论】：
如果您在最新的 Google Chrome 中打开开发者工具，您应该会看到元素选项卡已被选中。在必须悬停的元素上，只需右键单击它并打开“强制元素状态”菜单以选择 :hover 选项。
【讨论】：
您不能在浏览器的检查器中更改 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://stackoverflow.com/a/19247955 了解更多信息）。
【讨论】：
这是我所做的：
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 中测试）。
【讨论】：