Отключить всплывающую подсказку jQuery UI для определенных элементов

Для простоты я хотел бы включить виджет всплывающей подсказки пользовательского интерфейса jQuery во всех элементах страницы:

Затем отключите его для определенных элементов или элементов и их потомков. Но это не похоже на работу:

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

мой $('#menu *[title]') Селектор, кажется, работает как я ожидаю, получая все элементы-потомки, которые имеют атрибут title элемента #menu.

Так почему не работает опция отключена в .tooltip({ disabled: true }); отключить всплывающую подсказку для этих элементов? Есть ли другой способ и / или лучший способ сделать это?

10 ответов

Решение

Установите всплывающую подсказку на все элементы с помощью:

$('*').tooltip();

И отключить с

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

А ля:

jsFiddle

Ни один из ответов выше не сработал для меня, похоже, что способ сделать это сейчас - использовать опцию items:

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

Если вы используете селектор вместо $(document)не забудьте позвонить по этому коду в нужный момент.

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

Ничто из этого не сработало для меня, и это сводило меня с ума.

Вот что сработало для меня:

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

$ ('*'). tootip может сильно задержать просмотр страницы!

Обновление, ноябрь 2022 г .: я попробовал предложения из других ответов, и мне помогло

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

Верхний ответ с всплывающей подсказкой («отключить») не сработал.

Возможно $(':not(.menu *[title])').tooltip({ track: true });?

Для тех, кто борется с этим на страницах 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>

Вот что я сейчас делаю..

Показать подсказку для:

  • Исключите что-нибудь с классом "noToolTip".
  • А затем включите эти:
    • Элементы с атрибутом TITLE.
    • Элементы IMG с атрибутом ALT.
    • Что-нибудь с классом "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" );
      }
   }
});

Согласно документам jQueryUI на дату моего ответа.

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

Ничто из вышеперечисленного не сработало для меня... но это сработало (после инициализации):

$("#selector").tooltip("disable");
Другие вопросы по тегам