Question

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

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

Answer 1

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

只需实现隐藏工具提示逻辑的隐藏设置：

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

这让你有20秒的时间来检查它。如果你需要更多时间，那就增加'＃34;延迟＆＃34;属性。这是我的页面jquery工具提示的工作代码：

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

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

注意：我正在使用自定义类＆＃34; jqueryTooltip＆＃34;在检查后设置工具提示的样式。

Answer 2

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

Answer 3

我参加晚会，但实际上有一种简单的方法可以实现这一目标。

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

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

就我而言，我的工具提示上有一个班级.grey-tooltip，所以我打电话给$('.grey-tooltip').tooltip('open');。这应该打开工具提示，然后您可以像检查任何其他可见元素一样检查它们。

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

Answer 4

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

Answer 5

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

2-选择来源：

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

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

5-转到“应用程序”屏幕，然后尝试仅将具有工具提示的项目悬停，然后屏幕将冻结，并根据需要找到工具提示支架。

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

与Firefox相同，“源”选项卡中的差异称为“调试器”。

Answer 6

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

Answer 7

如果您在最新的Google Chrome浏览器中打开开发人员工具，则应该会看到选中的元素标签。在你必须悬停在你的元素上，只需右键单击它并打开“强制元素状态”菜单以选择：悬停选项。

Answer 8

您无法在浏览器的检查器中更改jQuery工具提示的样式，因为正如您所说，它在mouseout上从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旁边展开所有属性
在扩展构造函数下，然后 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了解更多信息）。

Answer 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中测试）动态更改工具提示样式。

如何检查JQuery UI工具提示？

9 个答案: