1

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);
    }    
  });
})();

1 Resposta 1

2

Uma solução simples seria utilizando o próprio .attr, defini uma classe para que seja alterado somente os radio que queremos:

/*Pego o evento de alteração nos seus radios*/
$('.radioArtigo').change(function() {
  /*seto a mensagem para todos*/ 
  $('.radioArtigo').attr('title', 'Clique aqui para ver o resumo do artigo.'); 
  /*Removo a mensagem do selecionado*/
  $(this).attr('title', '');  
});

Segue o jsfiddle.

7
  • 1
    Obrigado @Brunno. Usando sua sugestão deu certo após adicionar "title= "Clique aqui para ver o resumo do artigo." na tag imput, pois, eu quero que a mensagem apareça antes de qualquer radio ser selecionado, visto que todos devem ser carregados sem seleção. Ficou assim: <input type="radio" class="radioArtigo" name="tl-group"title= "Clique aqui para ver o resumo do artigo." />. Mas como eu tenho outro script que mostra um tootip similar a este: [link] (designreflect.com/wp-content/uploads/2012/12/…), estou enfrentando um problema de conflito...
    – Raniere
    Commented 2/03/2016 às 16:25
  • @Raniere, se você adicionar a class somente nos radios que você está utilizando ele não casará problemas nos outros.
    – Brunno
    Commented 2/03/2016 às 16:37
  • Então, creio que é exatamente isso que fiz. Mas mesmo assim estou com um problema de conflito com outro script que tenho, responsável por gerar o efeito de toottip nos titles como mostra a imagem no link acima. Digo isso porque se removo um script, o outro funciona, e vice-versa. Neste tooltip que estou usando uso JQuery-ui, então, deve haver conflito entre JQuery e JQuery-ui. Soluções como descrito aqui: imasters.com.br/artigo/13871/jquery/… não surtiram efeito. Estou tentando implementar um script para o tooltip com JQuery e ver se resolve.
    – Raniere
    Commented 2/03/2016 às 21:14
  • @Raniere, fiz um exemplo de cada para você nesse fiddle, tem um exemplo com UI e o evento de não mostrar se selecionado, um exemplo do UI e o jQuery funcionando juntos. Acho que seu problema está sento ao chamar o tooltip do UI, você deve está apendado ele ao $( document ).tooltip(); ai ele vai causar conflitos mesmo. Espero ter ajudado :)
    – Brunno
    Commented 3/03/2016 às 1:09
  • Eu agradeço seu empenho @Brunno, mas não estou conseguindo usar este eu último exemplo fora do fiddle. Parece também haver um comportamento "anormal" na seção "jQuery-UI com a logica de não mostrar se selecionado". Este seu parece não mostrar mais o tootip após ele ter sido selecionado, isso é bem o que eu queria mesmo, mas, quando desselecionado o radio, o tootip deveria voltar a ser exibido. Isso não ocorre aqui.
    – Raniere
    Commented 3/03/2016 às 3:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .