Masquer l'infobulle native à l'aide de jQuery

Question

Existe-t-il un moyen de masquer l'action de l'infobulle native lorsqu'un utilisateur survole une balise d'ancrage avec un attribut title? Je ne veux pas l'enlever ne montre pas la mauvaise boîte jaune qui est l'action de l'info-bulle par défaut.

MISE À JOUR:

Après avoir lu quelques autres postes, je ne pense pas que je peux cacher l'attribut title pour l'action infobulle native, mais je suis en train de penser en dehors de la boîte ici. Pourrais-je utiliser un autre attribut à la place de l'attribut title à l'intérieur de la balise anchor et garder une page valide ???

Supprimer la valeur de l'attribut title n'est pas une option à moins que quelqu'un puisse trouver comment l'ajouter pour un événement onclick?

CODE DE TRAVAIL CI-DESSOUS

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

$('a').click(function() { 
    var $this = $(this); 
    var title = $this.data('title'); 
    ... do your other stuff... 
}); 

Answer 1

Apparemment, l'attribut title ne tombe pas sous le gestionnaire d'événements normal. Quoi qu'il en soit, ma réponse originale n'a pas fonctionné, bien que je continue à jouer avec pour voir si je peux le faire fonctionner. Si vous avez besoin de conserver l'attribut title mais que vous ne voulez pas l'effet popup, comme indiqué dans vos commentaires, stockez l'attribut title dans les données de l'élément et utilisez-le à partir de là.

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

$('a').click(function() { 
    var $this = $(this); 
    var title = $this.data('title'); 
    ... do your other stuff... 
}); 

réponse originale:

donner à chaque élément qui a un titre un vol stationnaire spécifique sur gestionnaire qui empêche l'action par défaut.

$('[title]').hover(
    function(e) { 
     e.preventDefault(); 
    }, 
    function() { } 
); 

Sauf après l'avoir testé ne semble pas fonctionner.

Answer 2

Vous pouvez le supprimer par:

$("a").removeAttr("title"); 

Cela supprimera pour js utilisateurs seulement, il est donc encore et trouvable pour accessable moteurs de recherche.

Answer 3

Pour l'obtenir sur le titre, je voudrais utiliser les données() Méthode:

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

// to access it 
$(document).ready(function() { 
    $('A').click(function() { 
     alert($(this).data('title')); 
    }); 
}); 

Vous pouvez également le sélecteur pour tout élément qui a un attribut title:

$('*[title]').each(... 

Answer 4

var tempTitle = ""; 
$('a[title]').hover(
    function(e){ 
     e.preventDefault(); 
     tempTitle = $(this).attr('title'); 

     $(this).attr('title', ''); 

      $(this).mousedown(
       function(){ 
        $(this).attr('title', tempTitle); 
       } 
      ); 
    } 
    , 
    function() { 
     $(this).attr('title', tempTitle); 
    } 
); 

Essayez cela fonctionne comme un chien!

Answer 5

Voici un autre spin-off que vous pourriez trouver utile, si vous utilisez une visionneuse plug-in JS qui doit encore l'attribut « title » pour le traitement du titre sur les diapositives Lightbox:

$('a.lightbox-trigger').each(function() { // Process all lightbox trigger links 

    $(this).mouseover(function() { 
     if(!$(this).data('keep')) // 1st time = FALSE, so make the swap 
      $(this).attr('data-title', $(this).attr('title')).attr('title', ''); 
     $(this).data('keep', true); // Preserve value if hovered before clicked 
    }); 

    $(this).mousedown(function() { 
     $(this).attr('title', $(this).attr('data-title')).attr('data-title', ''); 
     $(this).data('keep', false); // Mark element as safe to swap again 
    }); 
}); 

Answer 6

Je sais que c'est post sur Jquery mais je courais pour cette question et est principalement relié à lighboxes donc ici est Mootools fixer pour iaian7 Mediabox avancée sur les liens d'image si quelqu'un a besoin Le correctif travaillera sur ces également http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

if ($$('.lbThumb').length > 0) { // lbThumb a class or what ever you are using 
    $$('.lbThumb').each(function (el) { // same here , your a class 

     var savedtitle = el.get('title'); 
     var getimage = el.getElement('img'); 
        // must use image click since Mediabox will kill our a element click 
     getimage.addEvent('click', function() { 
      el.set('title',savedtitle); 
     }); 
     // hide nasty a tooltip 
     el.addEvents({ 
     mouseenter: function() { 
      el.erase('title'); 
     }, 
     // bring it back 
     mouseleave: function() { 
      el.set('title',savedtitle); 

     } 
     }); 

    }); 
} 

Answer 7

J'ai utilisé une variation sur le code de bEj ni c bEj, parce que je devais conserver le contenu du titre sur hover, mais je devais quand même supprimer le comportement par défaut.

// Suppress default tooltip behavior on hover 
var tempTitle = ""; 
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){ 
    e.preventDefault(); 
    tempTitle = $(this).attr('title'); 

    $(this).attr('title', ''); 
     // add attribute 'tipTitle' & populate on hover 
     $(this).hover(
      function(){ 
       $(this).attr('tipTitle', tempTitle); 
      } 
     ); 
    }, 
    // restore title on mouseout 
    function() { 
    $(this).attr('title', tempTitle); 
    } 
); 

Cela me permet de le faire dans ma feuille de style: /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */

abbr, 
abbr[tipTitle], 
dfn, 
dfn[tipTitle], 
span.info-tip, 
span.info-tip[tipTitle] { 
border-bottom:none; /*remove border 1st, then let following rules add it back in*/ 
} 

p:hover abbr[tipTitle], 
li:hover abbr[tipTitle], 
dl>*:hover abbr[tipTitle], 
label:hover abbr[tipTitle], 
p:hover dfn[tipTitle], 
li:hover dfn[tipTitle], 
dl>*:hover dfn[tipTitle], 
label:hover dfn[tipTitle], 
p:hover span.info-tip[tipTitle], 
li:hover span.info-tip[tipTitle], 
dl>*:hover span.info-tip[tipTitle], 
label:hover span.info-tip[tipTitle] 
{ 
position: relative; 
text-decoration: none; 
border-bottom: 1px dotted #333; 
cursor: help; 
} 

p:hover abbr[tipTitle]:before, 
li:hover abbr[tipTitle]:before, 
dl>*:hover abbr[tipTitle]:before, 
label:hover abbr[tipTitle]:before, 
p:hover dfn[tipTitle]:before, 
li:hover dfn[tipTitle]:before, 
dl>*:hover dfn[tipTitle]:before, 
label:hover dfn[tipTitle]:before, 
p:hover span.info-tip[tipTitle]:before, 
li:hover span.info-tip[tipTitle]:before, 
dl>*:hover span.info-tip[tipTitle]:before, 
label:hover span.info-tip[tipTitle]:before { 
content: ""; 
position: absolute; 
border-top: 20px solid #803808; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
visibility: hidden; 
top: -18px; 
left: -26px; 
} 

p:hover abbr[tipTitle]:after, 
li:hover abbr[tipTitle]:after, 
dl>*:hover abbr[tipTitle]:after, 
label:hover abbr[tipTitle]:after, 
p:hover dfn[tipTitle]:after, 
li:hover dfn[tipTitle]:after, 
dl>*:hover dfn[tipTitle]:after, 
label:hover dfn[tipTitle]:after, 
p:hover span.info-tip[tipTitle]:after, 
li:hover span.info-tip[tipTitle]:after, 
dl>*:hover span.info-tip[tipTitle]:after, 
label:hover span.info-tip[tipTitle]:after { 
content: attr(tipTitle); 
position: absolute; 
color: white; 
top: -35px; 
left: -26px; 
background: #803808; 
padding: 5px 15px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
white-space: nowrap; 
visibility: hidden; 
} 

p:hover abbr[tipTitle]:hover:before, 
li:hover abbr[tipTitle]:hover:before, 
dl>*:hover abbr[tipTitle]:hover:before, 
label:hover abbr[tipTitle]:hover:before, 
p:hover dfn[tipTitle]:hover:before, 
li:hover dfn[tipTitle]:hover:before, 
dl>*:hover dfn[tipTitle]:hover:before, 
label:hover dfn[tipTitle]:hover:before, 
p:hover span.info-tip[tipTitle]:hover:before, 
li:hover span.info-tip[tipTitle]:hover:before, 
dl>*:hover span.info-tip[tipTitle]:hover:before, 
label:hover span.info-tip[tipTitle]:hover:before, 
p:hover abbr[tipTitle]:hover:after, 
li:hover abbr[tipTitle]:hover:after, 
dl>*:hover abbr[tipTitle]:hover:after, 
label:hover abbr[tipTitle]:hover:after, 
p:hover dfn[tipTitle]:hover:after, 
li:hover dfn[tipTitle]:hover:after, 
dl>*:hover dfn[tipTitle]:hover:after, 
label:hover dfn[tipTitle]:hover:after, 
p:hover span.info-tip[tipTitle]:hover:after, 
li:hover span.info-tip[tipTitle]:hover:after, 
dl>*:hover span.info-tip[tipTitle]:hover:after, 
label:hover span.info-tip[tipTitle]:hover:after { 
visibility: visible; 
transition: visibility 0s linear .3s; 
-moz-transition: visibility 0s linear .3s; 
} 

me donner de jolies infobulles où je les ai besoin, sans l'infobulle par défaut apparaissant simultanément.

Answer 8

L'affiche d'origine voulait seulement désactiver l'action native de .tooltip(). Si tel est le cas, utilisez la solution simple suivante:

$(function() { 
    $(document).tooltip({ 
     items: "[data-tooltip]", 
     content: function() { 
      var element = $(this); 
      if (element.is("[data-tooltip]")) { 
       return element.attr('data-tooltip'); 
      } 
     } 
    }); 
}); 

maintenant l'attribut [titre] est désactivé et l'info-bulle ne sera déclenchée que lorsqu'un élément a un attribut [data-infobulle]. En définissant plus « éléments », vous pouvez créer des comportements et de styles différents:

$(function() { 
    $(document).tooltip({ 
     items: "[data-tooltip],img[alt]", 
     content: function() { 
      var element = $(this); 
      if (element.is("[data-tooltip]")) { 
       return element.attr('data-tooltip'); 
      } 
      if (element.is("[alt]")) { 
       return element.attr('alt') + something_else; 
      } 
     } 
    }); 
}); 

http://jqueryui.com/tooltip/#custom-content & http://api.jqueryui.com/tooltip/#option-items

Answer 9

Ses oeuvres comme celle-ci:

Renommer pour stitle au lieu de l'attribut de titre par défaut et si vous avez besoin appeler de Jquery:

getAttribute ('stitle')

Ca marche sur tous.

Answer 10

Vous pouvez connecter l'événement 'mouseenter' et renvoyer false, ce qui empêchera l'affichage des info-bulles natives.

$(selector).on('mouseenter', function(){ return false; });

Answer 11

var title; 
$('a[title]').hover(function() { 
    title = $(this).attr('title'); 
    $(this).attr('title',''); 
}, function() { 
    $(this).attr('title',title); 
});