Cómo cambiar el atributo de título de un elemento usando jQuery

Tengo un elemento de entrada de formulario y quiero cambiar su atributo de título. Esto tiene que ser fácil, pero por alguna razón no puedo encontrar cómo hacerlo. ¿Cómo se hace esto y dónde y cómo debería buscar cómo hacer esto?

Antes de escribir cualquier código, analicemos la diferencia entre atributos y propiedades. Los atributos son las configuraciones que aplica a los elementos en su marcado HTML ; el navegador analiza el marcado y crea objetos DOM de varios tipos que contienen propiedades inicializadas con los valores de los atributos. En objetos DOM, como un simple HTMLElement, casi siempre desea trabajar con sus propiedades , no con su colección de atributos .

La mejor práctica actual es evitar trabajar con atributos a menos que sean personalizados o no haya una propiedad equivalente para complementarlo. Como titleexiste de hecho como una propiedad de lectura / escritura en muchos HTMLElements, debemos aprovecharla.

Puede leer más sobre la diferencia entre atributos y propiedades aquí o aquí .

Con esto en mente, manipulemos eso title...

Obtener o establecer la titlepropiedad de un elemento sin jQuery

Como titlees una propiedad pública, puede configurarla en cualquier elemento DOM que lo admita con JavaScript simple:

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

La recuperación es casi idéntica; nada especial aquí:

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

Esta será la forma más rápida de cambiar el título si eres un fanático de la optimización, pero como querías que jQuery participara:

Obtener o establecer la title propiedad de un elemento con jQuery (v1.6 +)

jQuery introdujo un nuevo método en v1.6 para obtener y establecer propiedades. Para establecer la titlepropiedad en un elemento, use:

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

Si desea recuperar el título, omita el segundo parámetro y capture el valor de retorno:

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

Consulte la prop()documentación de la API para jQuery.

Si realmente no desea usar propiedades, o si está usando una versión de jQuery anterior a v1.6, entonces debería seguir leyendo:

Obtener o establecer el title atributo de un elemento con jQuery (versiones <1.6)

Puede cambiar el title atributo con el siguiente código:

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

O recuperarlo con:

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

Consulte la attr()documentación de la API para jQuery.

En los cuadros de diálogo modales de jquery ui, debe usar esta construcción:

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

Yo creo

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

o

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

debería hacer el truco ...

Creo que puede encontrar todas las funciones principales en jQuery Docs , aunque odio el formato.

Otra opción, si lo prefiere, sería obtener el elemento DOM del objeto jQuery y usar accesores DOM estándar en él:

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

La "forma jQuery", como mencionan otros, es usar el método attr () Consulte la documentación de la API para attr () aquí .

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

para el primer título:

jqueryTitle('destroy');

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

Si está creando un dive intentando agregarle un title.

Tratar

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

Como una adición a la respuesta @ Cᴏʀʏ, asegúrese de que el título de la información sobre herramientas no se haya configurado manualmente en el elemento HTML. En mi caso, la clase span para la información sobre herramientas ya tenía un texto de título fijo, debido a esto mi función JQuery$('[data-toggle="tooltip"]').prop('title', 'your new title'); no funcionaba.

Cuando eliminé el atributo de título en la clase de intervalo HTML, jQuery estaba funcionando.

Entonces:

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

Debe codificarse:

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