How to hide title when radio is selected?

I want to put a list of articles on my site and I want you 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 in the radios so that when the mouse pointer passes over each one, the instruction says something like "Click here to see the article summary." On each radio, I did the following:

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

So far so good, but I would like it that when a radio is clicked, it no longer displays the message in title if the mouse pointer passes over it. That is: I would like that when the radio is clicked, the title attribute is taken from the radio in question. When another radio is clicked the same one I describe above should happen with it and what had been previously clicked, it should get the title attribute back.

I'm starting to use Jquery and I can not do much. To the nearest memento I could do was this down here - but not 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);
    }    
  });
})();