Come disattivare la descrizione comando nel browser con jQuery?

Question

C'è un modo per disattivare la descrizione del browser da visualizzare quando si passa sopra a elementi che hanno l'attributo 'titolo' popolato? Si noti che non voglio rimuovere il contenuto del titolo. ecco il codice sono pregati:

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

e in asp.net

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

</ItemTemplate> 

Answer 1

Si potrebbe utilizzare jQuery per rimuovere il contenuto del titolo attribte, o spostarlo in qualche altro parametro per un uso successivo .

Ciò significa che si perde comunque l'accessibilità.

RE: ClueTip Una ricerca di Google sembra suggerire che questo è un problema comune - sta succedendo solo in IE? ClueTip sembra funzionare come previsto in FireFox.

Answer 2

È possibile rimuovere l'attributo title al caricamento della pagina.

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

Se è necessario utilizzare il titolo successivo, è possibile conservarlo in jQuery dell'elemento data().

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

Un'altra opzione è quella di cambiare il nome dell'attributo title-aTitle, o qualcos'altro che il browser avrebbe ignorato, e quindi aggiornare qualsiasi JavaScript per leggere il nuovo nome di attributo invece di title.

Aggiornamento:

Un'idea interessante si potrebbe usare è quello di "pigramente" rimuovere il titolo quando si passa sopra un elemento. Quando l'utente sposta l'elemento, puoi quindi ripristinare il valore del titolo.

Questo non è semplice come dovrebbe essere perché IE non rimuove correttamente il suggerimento sull'evento hover se si imposta l'attributo titolo su null o si rimuove l'attributo titolo. Tuttavia, se si imposta il suggerimento su una stringa vuota ("") al passaggio del mouse, verrà rimosso il suggerimento da tutti i browser, incluso Internet Explorer.

È possibile utilizzare il metodo descritto sopra per memorizzare l'attributo titolo nel metodo data(...) di jQuery e quindi reinserirlo su 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')); 
    }); 
}); 

Answer 3

Hack fino ClueTip utilizzare un attributo title rinominato.

Answer 4

Ecco la moderno jQuery modo per farlo (IMO) ...

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

... e, naturalmente, la lettura del title attributo posteriore è fatto con ...

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

Answer 5

Seguendo il suggerimento di Dan Herbert sopra, ecco il codice:

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

Answer 6

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

Ciao a tutti. Sto usando questa soluzione e funziona bene su tutti i browser.

Answer 7

Come ho bisogno di questa funzionalità sarà disponibile nel corso un'altra azione (come schermata di copia o di scegliere il colore,) la mia soluzione contiene due funzioni da chiamare quando che avvia un procedimento e quando finisce:

$.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 non può essere usato perché altri elementi potrebbero sovrapporre l'elemento titolato (come un'immagine in un div titolato) e mouseOut si verificherà non appena si passa sopra l'elemento interno (l'immagine!)

Tuttavia quando si usa mouseMove si dovrebbe prestare attenzione perché l'evento si attiva più volte. Per evitare di cancellare i dati salvati, controlla prima che il titolo non sia vuoto!

L'ultima riga in RemoveTitles, tenta di ripristinare il titolo dall'elemento da cui il mouse non è uscito quando si chiama la fine su mouseClick o su un tasto di scelta rapida.