Eu quero colocar uma lista de artigos em meu site e quero que tenha o nome e uma pequena descrição de cada artigo ao lado de um radio. Quando o radio pertencente a um artigo é clicado, surge uma descrição do artigo. Isto já está funcionando.
Mas eu quero usar um texto descritivo nos radios para que quando o ponteiro do mouse passar sobre cada um, surja a instrução dizendo algo como “Clique aqui para ver o resumo do artigo.”. Em cada radio, eu fiz da seguinte forma:
<input type="radio" title= "Clique aqui para ver o resumo do artigo." />
Até aqui tudo bem, mas eu gostaria de que, quando um radio estiver clicado, este não exiba mais a mensagem em title, caso o ponteiro do mouse passe sobre ele. Ou seja: eu gostaria de que quanto o radio for clicado, a atributo title seja retirado do radio em questão. Quando outro radio for clicado o mesmo que descrevo acima deve acontecer com ele e o que havia sido clicado anteriormente, deve receber o atributo title de volta.
Eu estou começando a usar Jquery e não consigo fazer muita coisa. Até o memento o mais próximo que consegui fazer foi isto aqui abaixo - mas não está funcionado como esperado - baseado no exemplo que encontrei.
HTML:
<input type="radio" title="Clique aqui para ver o resumo do artigo." name="tl-group" /> Artigo 1
<br>
<input type="radio" title="Clique aqui para ver o resumo do artigo." name="tl-group" /> Artigo 2
<br>
<input type="radio" title="Clique aqui para ver o resumo do artigo." name="tl-group" /> Artigo 3
<br>
JavaScript:
(function() {
var ConteudoTitle = $("input").attr("title");
$('input[type=radio]').change(function() {
var input = $(this);
if (input.attr("title") === ConteudoTitle) {
input.removeAttr("title")
} else {
input.attr("title", ConteudoTitle);
}
});
})();