web-dev-qa-db-fra.com

Désactiver l'infobulle de l'interface utilisateur de jQuery pour certains éléments

Pour plus de simplicité, j'aimerais activer le widget d'info-bulle de l'interface utilisateur de jQuery sur tous les éléments de la page:

Puis désactivez-le pour certains éléments ou éléments et leurs descendants. Mais cela ne semble pas fonctionner:

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

Mon sélecteur $('#menu *[title]') semble fonctionner comme prévu, obtenant tous les éléments descendants ayant un attribut title de l'élément #menu.

Alors pourquoi l’option disabled ne fonctionne-t-elle pas dans .tooltip({ disabled: true }); pour désactiver l’info-bulle sur ces éléments? Y a-t-il un autre moyen et/ou un meilleur moyen d'y parvenir?

jquery-uitooltip
21
slolife

Définir une info-bulle sur tous les éléments avec:

$('*').tooltip();

Et désactiver avec

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

À la:

jsFiddle

27
Elliott

Aucune des réponses ci-dessus n'a fonctionné pour moi, il semble que la manière de procéder consiste maintenant à utiliser l'option items :

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

Rien de tout cela n'a fonctionné pour moi et cela m'a rendu fou.

C'est ce qui a fonctionné pour moi:

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

$ ('*'). tootip peut considérablement retarder l'affichage de votre page!

3
Jason Gilley

Si vous utilisez un sélecteur au lieu de $(document), n'oubliez pas d'appeler ce code au bon moment.

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

Peut-être $(':not(.menu *[title])').tooltip({ track: true });?

0
cjc343

Pour tous ceux qui ont des problèmes avec cela dans les pages ASP.NET MVC Razor. C'est dû aux aides de rasoir. Vous devrez ajouter ce qui suit aux attributs @ Html.EditorFor.

    autocomplete = "off"

Vous trouverez ci-dessous un exemple de groupe de formulaire dans lequel vous souhaitez procéder.

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

Voici ce que je fais en ce moment ..

Afficher la pointe de l'outil pour:

  • Exclure quoi que ce soit avec la classe "noToolTip".
  • Et puis inclure ceux-ci:
    • Un élément avec l'attribut TITLE.
    • Éléments IMG avec attribut ALT.
    • N'importe quoi avec la classe "toolTip" et l'attribut TITLE.

Voici mon code 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
Robert Mark Bram