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

226

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?

Brian
fonte

Respostas:

463

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.

Cᴏʀʏ
fonte
5
Se essa não é uma resposta bem construída, nenhuma é. E é tão preciso quanto bem construído. +1 ... (oh, e também o seu nome é incrível, porque ele é meu :) mesmo escrito o mesmo!)
VoidKing
@VoidKing: costumo revisitar e fazer respostas atuais que se tornam populares (das quais só tenho algumas). Tento fornecer tudo o que espero encontrar se estivesse pesquisando ou postando uma pergunta. Estou feliz que você encontrou!
Cᴏʀʏ
@ Cory Bem, para ser honesto, eu estava procurando outra coisa (era um tiro no escuro, mas estava procurando se havia alguma maneira de estilizar a caixa de título HTML padrão). Não encontrei o que estava procurando, mas realmente admirei o esforço que você colocou nessa resposta (você mostrou recursos, .js e jQuery, etc.). Enfim, boa resposta!
VoidKing
@VoidKing: Este provavelmente é o lugar errado para responder, mas se você estiver falando sobre as dicas de ferramentas padrão que aparecem quando você passa o mouse sobre itens com atributos alt ou title, talvez essa resposta lhe dê algumas dicas.
Cᴏʀʏ
@Cory Obrigado, senhor!
VoidKing
31

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

$( "#my_dialog" ).dialog( "option", "title", "my new title" );
Igor L.
fonte
3
Lifesaver !! Ao usar a resposta votada acima, o título é alterado uma vez e, em seguida, o título não muda a menos que você use a opção de título na caixa de diálogo! MUITO OBRIGADO MUITO!
Ryan Ellis
Fico feliz por ler os comentários ;-) Se você precisar alterar o título várias vezes, defina-o nas opções da caixa de diálogo.
Michel
Nunca teria pensado que isso seria aceito tantas vezes. Estou muito contente que ele ajudou :-)
Igor L.
15

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.

womp
fonte
7

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 .

Greg Campbell
fonte
2
jqueryTitle({
    title: 'New Title'
});

para o primeiro título:

jqueryTitle('destroy');

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

Erdi Ertaş
fonte
Esse problema pode ser resolvido usando a própria biblioteca jquery. Você deve se referir apenas ao uso de bibliotecas de terceiros quando o OP mencionar isso, ou isso não poderá ser realizado sem o uso de uma biblioteca de terceiros.
Avishek
Sim, mas existem outros recursos. Solução simples, mas agradável ... Você pode examinar ...
Erdi ERTAS
haveria uma sobrecarga de transporte http da biblioteca de terceiros, que pode ser evitada usando métodos nativos / estoque.
Avishek
além disso, já existe uma resposta amplamente aceita que é mais eficiente.
Avishek
2

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

Experimentar

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

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