关闭某些元素的 jQuery UI 工具提示答案

【问题标题】：Turn off jQuery UI tooltip for certain elements关闭某些元素的 jQuery UI 工具提示
【发布时间】：2012-10-30 17:07:03
【问题描述】：

为简单起见，我想在页面的所有元素上启用 jQuery UI 工具提示小部件：

然后对某些元素或元素及其后代禁用它。但这似乎不起作用：

$(document).tooltip({ track: true });
$('#menu *[title]').tooltip({ disabled: true });

我的$('#menu *[title]') 选择器似乎按我的预期工作，获取所有具有#menu 元素的title 属性的后代元素。

那么为什么disabled 选项不能在.tooltip({ disabled: true }); 中工作以禁用这些元素上的工具提示？有没有其他方法和/或更好的方法来实现这一点？

【问题讨论】：

标签： jquery-ui tooltip

【解决方案1】：

在所有元素上设置工具提示：

$('*').tooltip();

并禁用

$('#menu *[title]').tooltip('disable');

啊啦：

jsFiddle

【讨论】：

您使用了 $('input').tooltip() 然后使用了上面的代码并且它有效。这可能是我对更广泛的选择器所要做的，但我分叉了你的 jsfiddle 并使用了 $(document).tooltip() 并且禁用不再起作用：jsfiddle.net/slolife/K6hRH
@slolife：我不认为你能做到$(document).tooltip()。改用$('*').tooltip()：jsfiddle.net/K6hRH/1
$('*') 而不是 $(document) 是票。我只使用了 $(document) 因为那是 jQuery UI 演示站点上的示例代码。谢谢。将其添加到您的答案中，我会将其标记为已接受。
实际上$('#menu *[title]').tooltip('disable'); 删除了title 属性。但我只想禁用工具提示，它删除标题属性值，所以我的 jquery 滑块不起作用，这取决于title。还有其他解决方案吗？除了为我不想要的元素明确指定工具提示。

【解决方案2】：

以上答案都不适合我，看来现在的方法是使用items option：

$("*").tooltip({ items: ':not(.menu)' });

【讨论】：

我会推荐 '[title]:not(.menu)'
嘿，我这里有一些问题，我使用 jquery ui 工具提示，但我的 capcta 显示标题 WIDGET RECAPCTHA，然后我使用 $('#recaptcha *[title]').tooltip('disable');不工作
@FreddySidauruk 我不确定你为什么要回复这个答案，你的代码似乎不是基于它。您可以尝试使用 items 字段进行选择，根据我的回答 $("*").tooltip({ items: '#recaptcha *[title]' });假设这是正确的选择器。否则我想我不能帮助你更多，自从我上次使用 jQuery 已经有一段时间了。

【解决方案3】：

这些都不适合我，它一直让我发疯。

这对我有用：

$(document).tooltip({ content: function () { return $(this).not('#NoTipDiv *[title]').attr('title'); });

$('*').tootip 会严重延迟您的页面查看！

【讨论】：

【解决方案4】：

如果您使用选择器而不是 $(document)，请不要忘记在适当的时候调用该代码。

$(document).tooltip({show: false});
$(document).ready( function(){
    $('#OK_Button').tooltip({disabled: true});
});

【讨论】：

【解决方案5】：

也许是$(':not(.menu *[title])').tooltip({ track: true });？

【讨论】：

作为两条线的替代品，它什么也没改变？你有一个演示这个问题的jsfiddle吗？编辑：您在第一个代码块中有.menu，但说您的#menu 选择器按预期工作。这可能是问题的一部分吗？
我修复了问题中的代码，以便所有内容都引用#menu。但是您的示例仍然不适用于#menu。我会努力弄一个 jsfiddle

【解决方案6】：

根据截至我回答日期的 jQueryUI 文档。

$( ".selector" ).tooltip( "option", "disabled", true );

【讨论】：

我在这里看到了文档：api.jqueryui.com/tooltip/#option-disabled 但这对我来说是行不通的
给我Uncaught TypeError: e[b] is not a function

【解决方案7】：

这就是我现在正在做的事情..

显示工具提示：

排除任何具有“noToolTip”类的内容。
然后包括这些：
- 具有 TITLE 属性的元素。
- 具有 ALT 属性的 IMG 元素。
- 具有“工具提示”类和 TITLE 属性的任何内容。

这是我的 javascript 代码。

// Set up tool tips for images and anchors.
$( document ).tooltip({
   items: "img[alt], a[title], .toolTip[title], :not(.noToolTip)",
   track: true,
   content: function() {
      var element = $( this );
      // noToolTip means NO TOOL TIP.
      if ( element.is( ".noToolTip" ) ) {
         return null;
      }
      // Anchor - use title.
      if ( element.is( "a[title]" ) ) {
         return element.attr( "title" );
      }
      // Image - use alt.
      if ( element.is( "img[alt]" ) ) {
         return element.attr( "alt" );
      }
      // Any element with toolTip class - use title.
      if ( element.is( ".toolTip[title]" ) ) {
         return element.attr( "title" );
      }
   }
});

【讨论】：

【解决方案8】：

对于在 ASP.NET MVC Razor 页面中遇到此问题的任何人。这是由于剃须刀助手。您需要将以下内容添加到 @Html.EditorFor 属性中。

    autocomplete = "off"

下面是一个示例表单组，您可以在其中执行此操作。

<div class="form-group">
   @Html.LabelFor(model => model.Field, htmlAttributes: new { @class = "control-label col-md-2" })
   <div class="col-md-10">
      @Html.EditorFor(model => model.Field, new { htmlAttributes = new { @class = "form-control date-field", autocomplete = "off" } })
      @Html.ValidationMessageFor(model => model.Field, "", new { @class = "text-danger" })
   </div>
</div>

【讨论】：

【解决方案9】：

以上都没有对我有用...但这确实（在初始化之后）：

$("#selector").tooltip("disable");

【讨论】：