How to hide title when radio is selected?

Asked

Viewed 96 times

1

I want to put a list of articles on my website and I want it to have the name and a short description of each article next to a radio. When the radio belonging to an article is clicked, a description of the article appears. This is already working.

But I want to use descriptive text on the radios so that when the mouse pointer passes over each one, the instruction comes up saying something like "Click here to see the summary of the article". On each radio, I did it this way:

<input type="radio" title= "Clique aqui para ver o resumo do artigo." />

So far so good, but I would like that, when a radio is clicked, this no longer displays the message in title, in case the mouse pointer passes over it. In other words, I would like the title attribute to be removed from the radio in question when the radio is clicked. When another radio is clicked the same as described above should happen to it and what was previously clicked, it should receive the title attribute back.

I’m starting to use Jquery and I can’t do much. Even the closest thing I could do was this down here - but it’s not working as expected - based on the example that found.

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 answer

2

A simple solution would be to use the .attr, set a class to change only the radio we want:

/*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', '');  
});

Follows the jsfiddle.

  • 1

    Thanks @Brunno. Using your suggestion worked after adding "title= "Click here to view the article summary." in the imput tag, because, I want the message to appear before any radio is selected, since all must be loaded without selection. It looks like this: <input type="radio" class="radioArtigo" name="tl-group"title= "Click here to see the abstract of the article." />. But since I have another script that shows a tootip similar to this one: [link] (http://designreflect.com/wp-content/uploads/2012/12/jquery-tooltip-plugins/Responsive-Tooltip.jpg), I am facing a conflict problem...

  • @Raniere, if you add the class only on the radios you are using it will not lead to problems in others.

  • So I guess that’s exactly what I did. But even so I have a conflict problem with another script I have, responsible for generating the effect of toottip in Titles as shown in the image above link. I say this because if I remove one script, the other one works, and vice versa. In this tooltip I am using Jquery-ui, then there must be conflict between Jquery and Jquery-ui. Solutions as described here: http://imasters.com.br/artigo/13871/jquery/evitando-conflitos-com-jquerynoconflict/ had no effect. I’m trying to implement a tooltip script with Jquery and see if it solves.

  • @Raniere, I’ve made an example of each for you in this fiddle, has an example with UI and the event not show if selected, an example of UI and jQuery running together. I think your problem is sitting when calling the UI tooltip, you should be appending it to $( Document ).tooltip(); then it will cause conflicts anyway. I hope I’ve helped :)

  • I appreciate your efforts @Brunno, but I’m not getting to use this I last example out of the fiddle. There also seems to be an "abnormal" behavior in the "jQuery-UI section with the logic of not showing if selected". This one of yours doesn’t seem to show the tootip anymore after it’s been selected, that’s pretty much what I really wanted, but when the radio’s desiccated, the tootip should come back on. It doesn’t happen here.

  • @Raniere, had not noticed it hehehe, I did other fiddle only with jQuery ui with this fixed and with a slightly different logic. :)

  • Hello @Brunno. I am using in my project this script to generate tootip: http://jsfiddle.net/b8fcg/1/ The idea is that it is generated in all places where it has a title and is working as expected. I can use your join code from this above in my project, but I can’t put an Arrow in your code. You could indicate me a way to join your code to this in order to put an Arrow in the tooltip created by your code?

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.