10

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

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

4

9 回答 9

10

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

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

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

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

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

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

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

于 2014-07-17T14:46:52.640 回答
8

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

于 2016-02-28T22:06:01.267 回答
6

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

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

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

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

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

于 2016-07-08T00:20:14.260 回答
4

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

2- 选择来源： 选择来源

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

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

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

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

在 Firefox 中也一样，不同之处在于“Sources”选项卡被命名为“Debugger”。

于 2019-10-02T18:58:24.607 回答
3

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

于 2017-02-04T18:15:28.170 回答
0

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

于 2013-09-15T18:16:44.913 回答
0

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

于 2013-09-15T18:23:52.887 回答
0


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

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

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

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

  1. debugger;在前面的代码之前输入JavaScript

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

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

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

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

  6. 在该展开Constructor下，然后是DEFAULTS，然后 是template以查看组成工具提示的 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了解更多信息）。

于 2014-06-15T00:39:21.407 回答
0

这是我所做的：

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 中测试）。

于 2014-07-01T18:18:10.447 回答