Como alterar o atributo de título de um elemento usando jQuery

Eu tenho um elemento de entrada de formulário e quero alterar seu atributo title. Isso deve ser fácil como torta, mas por algum motivo não consigo encontrar como fazer isso. Como isso é feito, e onde e como devo pesquisar sobre como fazer isso?

Antes de escrevermos qualquer código, vamos discutir a diferença entre atributos e propriedades. Atributos são as configurações que você aplica aos elementos em sua marcação HTML ; o navegador analisa a marcação e cria objetos DOM de vários tipos que contêm propriedades inicializadas com os valores dos atributos. Em objetos DOM, como um simples HTMLElement, você quase sempre deseja trabalhar com suas propriedades , não com seus atributos coleção de .

A melhor prática atual é evitar trabalhar com atributos, a menos que sejam personalizados ou se não houver propriedade equivalente para complementá-lo. Como title, de fato, existe como uma propriedade de leitura / gravação em muitosHTMLElement s, devemos tirar proveito dela.

Você pode ler mais sobre a diferença entre atributos e propriedades aqui ou aqui .

Com isso em mente, vamos manipular isso title...

Obter ou definir a titlepropriedade de um elemento sem jQuery

Como titleé uma propriedade pública, você pode configurá-lo em qualquer elemento DOM que o suporte com JavaScript simples:

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

A recuperação é quase idêntica; nada de especial aqui:

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

Essa será a maneira mais rápida de alterar o título, se você é um especialista em otimização, mas desde que você queria o jQuery envolvido:

Obter ou definir a title propriedade de um elemento com jQuery (v1.6 +)

O jQuery introduziu um novo método na v1.6 para obter e definir propriedades. Para definir a titlepropriedade em um elemento, use:

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

Se você deseja recuperar o título, omita o segundo parâmetro e capture o valor de retorno:

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

Confira a prop()documentação da API para jQuery.

Se você realmente não deseja usar propriedades ou está usando uma versão do jQuery anterior à v1.6, deve ler sobre:

Obter ou definir o title atributo de um elemento com jQuery (versões <1.6)

Você pode alterar o title atributo com o seguinte código:

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

Ou recupere-o com:

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

Confira a attr()documentação da API para jQuery.

Nos diálogos jquery ui modal, você precisa usar esta construção:

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

eu acredito

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

ou

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

deve fazer o truque ...

Eu acho que você pode encontrar todas as funções principais no jQuery Docs , embora eu odeie a formatação.

Outra opção, se você preferir, seria obter o elemento DOM do objeto jQuery e usar acessadores DOM padrão nele:

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

A "maneira jQuery", como mencionado por outros, é usar o método attr (). Veja a documentação da API para attr () aqui .

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

para o primeiro título:

jqueryTitle('destroy');

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

Se você estiver criando um dive tentando adicionar um titlea ele.

Experimentar

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

Como complemento à resposta @ Cᴏʀʏ, verifique se o título da dica de ferramenta ainda não foi definido manualmente no elemento HTML. No meu caso, a classe span da dica de ferramenta já tinha um texto de título fixo, por isso minha função JQuery $('[data-toggle="tooltip"]').prop('title', 'your new title');não funcionou.

Quando removi o atributo title na classe span HTML, o jQuery estava funcionando.

Assim:

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

Deve ficar:

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