logo标签列表

关闭特定元素的jQuery UI工具提示

jquery-uitooltip
23
为了简单起见，我想在页面上的所有元素上启用jQuery UI提示小部件：
然后禁用某些元素或元素及其后代。但这似乎不起作用：
$(document).tooltip({ track: true });
$('#menu *[title]').tooltip({ disabled: true });

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

那么为什么在.tooltip({ disabled: true });中禁用这些元素上的工具提示时，disabled选项不起作用？是否有另一种和/或更好的方法来实现这一点？

10个回答
31

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

$('*').tooltip();

并禁用功能

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

关于:

jsFiddle

您使用了$('input').tooltip()，然后使用了上面的代码，它起作用了。这可能是我需要对更广泛的选择器做的事情，但是我分叉了您的jsfiddle并使用了$(document).tooltip()，现在禁用不再起作用：http://jsfiddle.net/slolife/K6hRH/ - slolife
2
@slolife：我认为你不能使用 $(document).tooltip()。尝试使用 $('*').tooltip() 替代：http://jsfiddle.net/K6hRH/1/ - Elliott
1
$('*')而不是$(document)是正确的写法。我之前使用$(document)只是因为这是jQuery UI演示网站上的示例代码。谢谢。请将这段话加入到你的回答中，我会标记为已接受的答案。 - slolife
1
实际上 $('#menu *[title]').tooltip('disable'); 会移除 title 属性。但我只想禁用工具提示，它移除了 title 属性值，导致我的 jQuery 滑块不起作用，因为它依赖于该 title 属性。还有其他解决方案吗？除了明确指定除我不想要的元素之外的工具提示。 - Ravi Dhoriya ツ
10

以上答案均没有对我有用，现在似乎使用items选项是实现这一功能的方法：

$("*").tooltip({ items: ':not(.menu)' });
我建议使用 '[title]:not(.menu)'。 - bugovicsb
嘿，我这里有些问题，我使用 jQuery UI 工具提示但我的验证码显示标题为“小部件 Recaptcha”，然后我使用 $('#recaptcha *[title]').tooltip('disable'); 却不起作用。 - Freddy Sidauruk
@FreddySidauruk 我不确定你为什么要回复这个答案，因为你的代码似乎并不基于它。你可以尝试使用我的答案中提到的 items 字段进行选择， $("*").tooltip({ items: '#recaptcha *[title]' }); 假设这是正确的选择器。否则我想我无法再帮助你了，因为我已经有一段时间没有使用过 jQuery 了。 - Quails4Eva
3

对我来说，这些都没有用，这让我疯狂。

以下是适用于我的方法：

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

$('*').tootip会严重延迟页面视图！

3

如果你使用选择器而不是$(document)，请不要忘记在正确的时刻调用该代码。

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

更新于2022年11月： 我尝试了更多回答中的建议，对我有效的是

$('#element_with_tooltip').tooltip({disabled: true})

tooltip('disable')的最佳答案没有起作用。

0

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

为以下内容显示工具提示：

  • 排除任何带有“noToolTip”类的内容。
  • 然后包括以下内容：
    • 具有TITLE属性的A元素。
    • 具有ALT属性的IMG元素。
    • 带有“toolTip”和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" );
      }
   }
});
0
根据我的回答日期，参考jQueryUI文档。 $( ".selector" ).tooltip( "option", "disabled", true );
我在这里看到文档：https://api.jqueryui.com/tooltip/#option-disabled 但是对我来说，调用$(document).tooltip(options);然后$( ".mySelector" ).tooltip( "option", "disabled", true );并没有起作用。 - Ryan
给我一个 Uncaught TypeError: e[b] is not a function。 - Leo
0

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

作为两行代码的替代，它什么也没改变吗？您有演示问题的jsfiddle吗？编辑：您在第一个代码块中有.menu，但是说您的#menu选择器按预期工作。这也许是问题的一部分吗？ - cjc343
我已经修复了问题中的代码，使得所有内容都引用 #menu。但是你的示例仍然无法使用 #menu。我会尝试创建一个 jsfiddle。 - slolife
0

对于在ASP.NET MVC Razor页面中遇到困难的任何人，这是与razor helpers相关的。您需要将以下内容添加到@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>
-1

以上方法都对我无效...但这个有效（在初始化后）：

$("#selector").tooltip("disable");
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接