Reputation: 19870

Turn off jQuery UI tooltip for certain elements

For simplicity, I'd like to enable the jQuery UI tooltip widget on all elements of the page:

Then disable it for certain elements or elements and their descendants. But this doesn't seem to work:

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

My $('#menu *[title]') selector seems to work as I expect, getting all descendant elements that have a title attribute of the #menu element.

So why isn't the disabled option working in .tooltip({ disabled: true }); to disable the tooltip on those elements? Is there another way and/or better way to accomplish this?

Upvotes: 24

Answers (10)

Vojta Baránek

Reputation: 61

Update Nov 2022: I tried suggestions from more answers and what worked for me was

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

The top answer with tooltip('disable') did not work.

Upvotes: 1

TsTeaTime

Reputation: 921

For anyone that is struggling with this in ASP.NET MVC Razor pages. It is due to the razor helpers. You will need to add the following to the @Html.EditorFor attributes.

    autocomplete = "off"

Below is an example form group where you would do this.

<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>

Upvotes: 0

11teenth

Reputation: 2103

None of the above worked for me...but this did (after initializaion):

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

Upvotes: -1

Andrei

Reputation: 882

If you use selector instead of $(document), don't forget to call that code at the right moment.

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

Upvotes: 3

Quails4Eva

Reputation: 550

None of the answers above worked for me, it seems like the way to do this now is to use the items option:

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

Upvotes: 10

Robert Mark Bram

Reputation: 9663

Here is what I am doing right now..

Show tool tip for:

Exclude anything with class "noToolTip".
And then include these:
- A elements with TITLE attribute.
- IMG elements with ALT attribute.
- Anything with class "toolTip" and TITLE attribute.

Here is my javascript code.

// 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" );
      }
   }
});

Upvotes: 0