jquery tooltip add div role = "log" nella mia pagina

Ho uno strano problema con il tooltip di jquery. Sto usando il codice qui sottojquery tooltip add div role = "log" nella mia pagina

<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
<script> 
    $(function() { 
    $(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" }); 
    }); 
    </script> 
</head> 
<body> 
<a href="link" class="addon_link tooltip" title="test1">test1</a> 
<a href="link" class="addon_link tooltip" title="test2">test2</a> 
<a href="link" class="addon_link tooltip" title="test3">test3</a> 
<a href="link" class="addon_link tooltip" title="test4">test4</a> 
</body> 
</html>

Tooltip funziona correttamente, ma dopo lo spettacolo Titolo li aggiunge alla pagina, e mette in un div come questo

<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div> 
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>

mia pagina è il seguente modulo

<head> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
    <script> 
     $(function() { 
     $(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" }); 
     }); 
     </script> 
    </head> 
    <body> 
    <a href="link" class="addon_link tooltip" title="test1">test1</a> 
    <a href="link" class="addon_link tooltip" title="test2">test2</a> 
    <a href="link" class="addon_link tooltip" title="test3">test3</a> 
    <a href="link" class="addon_link tooltip" title="test4">test4</a> 
    </body> 
    </html> 
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div> 
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>

Come posso nascondere Tooltip dopo lo spettacolo?

http://jsfiddle.net/V9R2M/2/

fonte

2014-07-19 user3243573

Non è necessario modificare nulla nel codice sorgente dei file js. Manca il file alternativo (.css) per le descrizioni dei comandi jQuery. Basta aggiungere a cascata collegamento foglio di stile nel tag testa come mostrato di seguito, & il tooltip jQuery funzionerà senza intoppi

<!-- jQuery style for Tooltips --> 
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

O è possibile aggiungere un tuo file foglio di stile (CSS) con questo codice

.ui-helper-hidden-accessible { 
border: 0; 
clip: rect(0 0 0 0); 
height: 1px; 
margin: -1px; 
overflow: hidden; 
padding: 0; 
position: absolute; 
width: 1px; 
}

Spero che questo aiuti somwone! ... :)

fonte

2014-12-19 15:53:41

Questo non mi ha aiutato. :( – sferret

@sferret: Quale versione dell'interfaccia utente jQuery stai usando? Spero di aver aggiunto il file CSS corretto per questo.Qui puoi ottenere il collegamento CSS alternativo per il file jQuery-ui.js https://code.jquery.com/ui/L'ultima versione di jQuery UI è 1.12.0-beta.1 E se hai aggiunto questo, devi cercare il collegamento al file CSS dell'ultima versione 1.12.0-beta.1 –

Questa risposta accettata ha quasi nulla a che fare con la soluzione al problema dell'accessibilità eccessiva dei tooltip di jquery-ui Penso che la risposta @lepix di seguito sia l'opzione migliore.Un metodo di rimozione per il tooltip su "close". – RemEmber

ho trovato una soluzione per il mio problema.

Ho dovuto cambiare lo stile di questo elemento:

.ui-helper-hidden-accessible{ 
    display: none; 
}

fonte

2014-07-19 14:03:50 user3243573

Ho appena modificato il codice sorgente:

prima ricerca di .ui-helper-hidden-accessible

quindi rimuovere .appendTo(this.document[0].body)

questo renderà l'elemento non si aggiunge al corpo ma non influenza il codice eseguito

.210

poi quelli div aggiungerà solo nella memoria

fonte

2014-08-23 00:57:30 user3896501

Questa "correzione" ** ** hanno influenzare il mio codice - i suggerimenti non vengono resi correttamente. Invece faccio questo: '$ (" div.ui-helper-hidden-accessibile div: hidden "). Remove();' all'interno dell'evento 'open' sulla funzione di inizializzazione del tooltip. –

Questa correzione ha funzionato perfettamente per me - avevo il CSS, quindi erano nascosti correttamente, ma stavo ottenendo centinaia di div aggiunti al DOM, la maggior parte dei quali erano vuoti (schede mutiple, contenenti jQuery grandi Datatables con un sacco di tooltip.) –

Stesso problema qui, jQuery UI a volte sarebbe aggiungere più di 4000 di questi elementi, tornando alla jQuery UI 1.10.1 risolto il problema per me.

fonte

2014-09-01 16:40:10

Secondo questo biglietto da jQuery UI, questa è una caratteristica aggiunta in jQuery UI 1.11.0 per migliorare l'accessibilità: http://bugs.jqueryui.com/ticket/10689

Se si desidera eliminare completamente la accodato <div> dal codice, è necessario distruggere il tooltip:

$(document).tooltip("destroy");

Si può anche tornare a jQuery UI 1.10.x, il plugin tooltip di questa versione non crea supplementare <div> per motivi di accessibilità.

fonte

2014-11-19 17:49:17 lepix

Semplicemente ho aggiunto close metodo all'inizializzazione e funziona correttamente.

close: function (event, ui) { 
      $(".ui-helper-hidden-accessible").remove(); 
     }

fonte

2015-10-04 07:29:41

questa dovrebbe essere la risposta accettata, anche se è un po 'pericoloso se anche altri componenti usano quella classe. –

Penso che sia molto raro trovare un altro componente JS usare la stessa classe "ui -helper-hidden- accessibile". –

Il pulsante dell'interfaccia utente jQuery e i widget di completamento automatico utilizzano questa classe, ma la classe non è probabilmente mai attiva quando viene attivato l'evento di chiusura tooltip. –

Ecco un modo per rimuovere questi elementi ancora una volta senza l'hacking jquery-ui:

$(elem).tooltip({ 
... 
    /* work around https://bugs.jqueryui.com/ticket/10689 */ 
    create: function(ev, ui) { 
     $(this).data("ui-tooltip").liveRegion.remove(); 
    } 
});

fonte

2016-09-01 07:34:21 nuddlegg

jquery tooltip add div role = "log" nella mia pagina

risposta

Problemi correlati