Nascondi descrizione comando nativa con jQuery

Question

C'è un modo per nascondere l'azione suggerita nativa quando un utente passa sopra un tag di ancoraggio con un attributo titolo? Non voglio rimuoverlo, ma non mostrare la brutta scatola gialla che è l'azione di suggerimento predefinita.

UPDATE:

Dopo aver letto un paio di altri posti non credo che posso nascondere l'attributo title per l'azione tooltip nativo, ma sto cercando di pensare fuori della scatola qui. Potrei usare un altro attributo invece dell'attributo title all'interno del tag anchor e mantenere comunque una pagina valida ???

La rimozione del valore dell'attributo titolo non è un'opzione a meno che qualcuno non riesca a capire come aggiungerlo per un evento onclick?

CODICE DI LAVORO SOTTO

$('[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

A quanto pare l'attributo title non ricade sotto il gestore di eventi normali. Ad ogni modo, la mia risposta originale non ha funzionato, anche se continuerò a giocarci per vedere se riesco a farlo funzionare. Se è necessario mantenere l'attributo title ma non si desidera l'effetto popup, come indicato nei commenti, quindi memorizzare l'attributo title nei dati dell'elemento e utilizzarlo da 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... 
}); 

risposta originale:

dare ad ogni elemento che ha un titolo di un passaggio del mouse sopra specifica gestore che impedisce l'azione predefinita.

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

Tranne dopo la prova non sembra funzionare.

Answer 2

È possibile rimuoverlo:

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

Ciò elimina solo per JS-utenti, quindi è ancora accessibile e trovabili per i motori di ricerca.

Answer 3

per farlo fuori dal titolo, vorrei utilizzare i dati() metodo:

$(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')); 
    }); 
}); 

Si potrebbe anche fare il selettore per qualsiasi elemento che ha un attributo 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); 
    } 
); 

Provalo come un cane!

Answer 5

Ecco un altro spin-off che si potrebbe trovare utile, nel caso in cui si utilizza un JS plugin per lightbox che ha ancora bisogno l'attributo "title" per l'elaborazione titolo sugli scivoli 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

So che questo è post su Jquery ma ho appena eseguito in questo problema e sta per lo più collegato con lighboxes ecco fissare Mootools per iaian7 Mediabox avanzata sul link delle immagini, se qualcuno ha bisogno La correzione lavorerà su uno di questi anche 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

Ho usato una variazione sul codice bEj ni c bEj, perché avevo bisogno di conservare il contenuto del titolo su hover, ma avevo ancora bisogno di sopprimere il comportamento predefinito.

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

Questo mi permette di fare questo nel mio foglio di stile: /* 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; 
} 

mi Dare tooltip belle in cui ho bisogno di loro, senza il suggerimento di default che appare contemporaneamente.

Answer 8

Il poster originale voleva solo disabilitare l'azione nativa di .tooltip(). Se questo è il caso, utilizzare la seguente soluzione semplice:

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

Ora l'attributo [titolo] è disabilitata e il tooltip scatterà solo quando un elemento ha un attributo [data-tooltip]. Con la definizione di piu 'articoli' è possibile creare un comportamento diverso e stili:

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

Le sue opere come questa:

Rinomina per sTitle invece di attributo titolo predefinito e se è necessario chiamare da Jquery:

getAttribute ('stitle')

Funziona su tutti.

Answer 10

È possibile agganciare l'evento 'mouseenter' e restituire false che interrompe la visualizzazione delle descrizioni comandi native.

$(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); 
});