Come modificare l'attributo title di un elemento usando jQuery

Ho un elemento di input del modulo e voglio cambiarne l'attributo title. Questo deve essere facile come una torta, ma per qualche motivo non riesco a trovare come farlo. Come è fatto, e dove e come dovrei cercare come fare?

Prima di scrivere qualsiasi codice, discutiamo della differenza tra attributi e proprietà. Gli attributi sono le impostazioni applicate agli elementi nel markup HTML ; il browser quindi analizza il markup e crea oggetti DOM di vari tipi che contengono proprietà inizializzate con i valori degli attributi. Sugli oggetti DOM, come un semplice HTMLElement, si desidera quasi sempre lavorare con le sue proprietà , non con la sua raccolta di attributi .

La best practice corrente è quella di evitare di lavorare con gli attributi a meno che non siano personalizzati o che non vi siano proprietà equivalenti a completarlo. Dal momento titleche esiste davvero come proprietà di lettura / scrittura su molti HTMLElements, dovremmo approfittarne.

Puoi leggere di più sulla differenza tra attributi e proprietà qui o qui .

Con questo in mente, manipoliamo che title...

Ottieni o imposta la titleproprietà di un elemento senza jQuery

Poiché titleè una proprietà pubblica, puoi impostarla su qualsiasi elemento DOM che la supporti con JavaScript semplice:

document.getElementById('yourElementId').title = 'your new title';

Il recupero è quasi identico; niente di speciale qui:

var elementTitle = document.getElementById('yourElementId').title;

Questo sarà il modo più veloce per cambiare il titolo se sei un fanatico dell'ottimizzazione, ma dal momento che volevi coinvolgere jQuery:

Ottieni o imposta la title proprietà di un elemento con jQuery (v1.6 +)

jQuery ha introdotto un nuovo metodo in v1.6 per ottenere e impostare le proprietà. Per impostare la titleproprietà su un elemento, utilizzare:

$('#yourElementId').prop('title', 'your new title');

Se desideri recuperare il titolo, ometti il ​​secondo parametro e acquisisci il valore restituito:

var elementTitle = $('#yourElementId').prop('title');

Consulta la prop()documentazione dell'API per jQuery.

Se davvero non vuoi usare le proprietà, o stai usando una versione di jQuery precedente alla v1.6, allora dovresti leggere:

Ottieni o imposta l' title attributo di un elemento con jQuery (versioni <1.6)

È possibile modificare l' title attributo con il seguente codice:

$('#yourElementId').attr('title', 'your new title');

O recuperalo con:

var elementTitle = $('#yourElementId').attr('title');

Consulta la attr()documentazione dell'API per jQuery.

Nelle finestre di dialogo modali di jquery devi usare questo costrutto:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

Io credo

$("#myElement").attr("title", "new title value")

o

$("#myElement").prop("title", "new title value")

dovrebbe fare il trucco ...

Penso che puoi trovare tutte le funzioni principali in jQuery Docs , anche se odio la formattazione.

Un'altra opzione, se preferisci, sarebbe quella di ottenere l'elemento DOM dall'oggetto jQuery e utilizzare gli accessi DOM standard su di esso:

$("#myElement")[0].title = "new title value";

Il "modo jQuery", come menzionato da altri, è usare il metodo attr (). Consulta la documentazione API per attr () qui .

jqueryTitle({
    title: 'New Title'
});

per il primo titolo:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

Se stai creando un dive stai provando ad aggiungere untitle .

Provare

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

Come aggiunta alla risposta @ Cᴏʀʏ, assicurati che il titolo della descrizione comando non sia già stato impostato manualmente nell'elemento HTML. Nel mio caso, la classe span per il tooltip aveva già un piccolo testo fisso, a causa di questa mia funzione JQuery$('[data-toggle="tooltip"]').prop('title', 'your new title'); non funzionava.

Quando ho rimosso l'attributo title nella classe span HTML, jQuery funzionava.

Così:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

Dovrebbe essere:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>