web-dev-qa-db-fra.com

Comment désactiver les info-bulles dans le navigateur avec jQuery?

Existe-t-il un moyen de désactiver l'affichage des info-bulles du navigateur lors du survol d'éléments survolant l'attribut 'title'? Notez que je ne souhaite pas supprimer le contenu du titre . Voici les codes demandés:

  $(document).ready(function() {
     $('a.clickableSticky').cluetip({
         splitTitle: '|',
         showTitle: false,
         titleAttribute: 'description',
         activation: 'click',
         sticky: true,
         arrows: true,
         closePosition: 'title'
     });
 });

et dans asp.net

  <ItemTemplate>
     <a class="clickableSticky" href="#"
     title=' <%#((Limit)Container.DataItem).Tip %>'>
     <img src="..\App_Themes\default\images\icons\information.png"/>
     </a>

 </ItemTemplate>
javascriptjqueryjquery-plugins
19
epitka

Vous pouvez supprimer l'attribut title lors du chargement de la page.

$(document).ready(function() {
    $('[title]').removeAttr('title');
});

Si vous devez utiliser le titre ultérieurement, vous pouvez le stocker dans l'élément jQuery data() de l'élément.

$(document).ready(function() {
    $('[title]').each(function() {
        $this = $(this);
        $.data(this, 'title', $this.attr('title'));
        $this.removeAttr('title');
    });
});

Une autre option consiste à modifier le nom de l'attribut title en aTitle ou un autre paramètre que le navigateur ignorerait, puis à mettre à jour le code JavaScript afin qu'il lise le nouvel nom d'attribut au lieu de title.

Mettre à jour:

Une idée intéressante que vous pourriez utiliser est de supprimer "paresseusement" le titre lorsque vous survolez un élément. Lorsque l'utilisateur survole l'élément, vous pouvez alors rétablir la valeur du titre.

Ce n'est pas aussi simple qu'elle devrait l'être car IE ne supprime pas correctement l'info-bulle de l'événement survolé si vous définissez l'attribut title à null ou supprimez l'attribut title. Toutefois, si vous définissez l'info-bulle sur une chaîne vide ("") en survol, elle sera supprimée de tous les navigateurs, y compris Internet Explorer. 

Vous pouvez utiliser la méthode que j'ai mentionnée ci-dessus pour stocker l'attribut title dans la méthode data(...) de jQuery, puis le remettre sur mouseout.

$(document).ready(function() {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});
50
Dan Herbert

Voici la manière moderne jQuery de le faire (IMO) ...

$('[title]').attr('title', function(i, title) {
    $(this).data('title', title).removeAttr('title');
});

... et bien sûr, la lecture de l'attribut title est faite avec ...

$('#whatever').data('title');
8
alex

En suivant la suggestion de Dan Herbert ci-dessus, voici le code:

$(element).hover(
    function () {
        $(this).data('title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function () {
        $(this).attr('title', $(this).data('title'));
    });
6
Barka

Vous pouvez utiliser jQuery pour supprimer le contenu de l'attribut de titre ou le déplacer dans un autre paramètre pour une utilisation ultérieure.

Cela signifie cependant que vous perdez un peu d'accessibilité.

RE: ClueTip Une recherche de Google semble suggérer que c'est un problème commun - cela ne se produit-il que dans IE ClueTip semble fonctionner comme prévu dans FireFox.

3
Mike Houston
function hideTips(event) {  
    var saveAlt = $(this).attr('alt');
    var saveTitle = $(this).attr('title');
    if (event.type == 'mouseenter') {
        $(this).attr('title','');
        $(this).attr('alt','');
    } else {
        if (event.type == 'mouseleave'){
            $(this).attr('alt',saveAlt);
            $(this).attr('title',saveTitle);
        }
   }
}

$(document).ready(function(){
 $("a").live("hover", hideTips);
});

Salut à tous. J'utilise cette solution et cela fonctionne très bien dans tous les navigateurs.

3
Oleh Zastavnyi

Piratez ClueTip pour utiliser un attribut title renommé.

1
Detect

Comme j'ai besoin de cette fonctionnalité pour être disponible lors d'une autre action (en tant qu'écran de copie ou couleur,), ma solution contient deux fonctions à appeler lorsque cette action commence et quand elle se termine:

$.removeTitles = function() {
    $('[title]').bind('mousemove.hideTooltips', function () {
    $this = $(this);
    if($this.attr('title') && $this.attr('title') != '') { 
        $this.data('title', $this.attr('title')).attr('title', '');
    }
  }).bind('mouseout.hideTooltips', function () {
    $this = $(this);
    $this.attr('title', $this.data('title'));
  });
}

$.restoreTitles = function() {
    $('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips');
    $('*[data-title!=undefined]').attr('title', $this.data('title'));
}

MouseEnter ne peut pas être utilisé car d’autres éléments pourraient recouvrir l’élément intitulé (en tant qu’image dans un div intitulé) et que mouseOut apparaîtra dès que la souris survolera l’élément interne (l’image!)

Cependant, lorsque vous utilisez mouseMove, vous devez faire attention car l'événement se déclenche plusieurs fois. Pour éviter d'effacer les données sauvegardées, vérifiez d'abord que le titre n'est pas vide!

La dernière ligne de RemoveTitles tente de restaurer le titre de l'élément depuis lequel la souris ne s'est pas quittée lors de l'appel de la fin sur mouseClick ou sur une touche de raccourci.

0
horiatu