相关疑难解决方法(0)

我正在使用JQuery:

$(window).resize(function() { ... });

但是,似乎如果此人通过拖动窗口边缘来手动调整其浏览器窗口的大小以使其变大或变小,则.resize上述事件将多次触发.

问题:如何在浏览器窗口调整大小完成后调用函数(以便事件仅触发一次)？

我有一个HTML按钮.我试图根据按钮的"title"属性在其上呈现工具提示,但它不会呈现.主要是因为它被禁用了.

然后我尝试在一个范围中包裹按钮并设置范围的"标题"属性.

将鼠标悬停在跨度中包含的按钮上仍无效.工具提示将在跨度的任何其他部分呈现,而不是按钮标记的一部分.就像我在跨度和按钮中放置一些文本一样,将鼠标悬停在文本上会生成工具提示,但如果将鼠标悬停在按钮上则不会渲染.

那么:如何显示禁用按钮的工具提示？

我试图在禁用的按钮上使用 Bootstrap 工具提示，让用户知道为什么按钮处于这种状态。然而，大多数浏览器不会在禁用元素上触发单击或悬停事件这一事实使事情变得更加困难。

我正在尝试将按钮包装在 div 中并初始化此元素中的工具提示，正如我在 SO 周围找到的这个解决方案所建议的那样。

所以我正在尝试这个：

<div id="disabled-button-wrapper" data-title="Tooltip title">
  <button class="btn btn-primary" disabled="disabled">Button</button>
</div>

<script>
    $(function() {
        $('#disabled-button-wrapper').tooltip();
    });
</script>

提琴手

但是工具提示根本不起作用。实际上，这甚至不是因为按钮，无论内容是什么，工具提示都不适用于包装器 div。这里发生了什么？我错过了什么明显的细节？

编辑：使用 Chrome 开发工具进行检查时，我确实看到正在生成工具提示元素，但有几个问题：

• 它仅在悬停在按钮右侧时触发：div 占据所有宽度（顺便说一句，我希望父级与按钮一样宽）。但不是当鼠标悬停在按钮上时。
• 工具提示元素隐藏在某处，未正确呈现。

编辑 2：我做了一些改变：jsfiddle

这样包装器就不会占用所有的宽度，使用主体作为容器可以解决渲染问题。现在唯一剩下的问题是：当鼠标悬停在禁用按钮所在的部分时，为什么没有在包装器上触发悬停事件？

我的 JSFiddle 在这里：

https://jsfiddle.net/h2kf5ztq/

我在很大程度上试图从以下方面复制 balexand 的答案：

如何在禁用按钮上启用引导工具提示？

包括，重要的是，CSS：

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}

但出于某种原因，我禁用的按钮没有工具提示。

如何启用工具提示？

我在脚本标记中的页面底部添加了以下内容：

JavaScript

$('.resetPrice').tooltip();

HTML

<button title="reset pricing" class="btn btn-mini resetPrice" type="button" id="ResetAA1-1-1">
    <i class=" icon-refresh"></i>
</button>

任何帮助将不胜感激。