JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<fieldset>
<legend>Sem jQuery-UI</legend>
<input type="radio" class="radioArtigo" 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."  class="radioArtigo" name="tl-group" /> Artigo 2<br>
<input type="radio" title="Clique aqui para ver o resumo do artigo."  class="radioArtigo" name="tl-group" /> Artigo 3<br>
</fieldset>

<fieldset>
<legend>Com jQuery-UI</legend>
<input type="radio" class="uiArtigo" 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."  class="uiArtigo" name="tl-group" /> Artigo 2<br>
<input type="radio" title="Clique aqui para ver o resumo do artigo."  class="uiArtigo" name="tl-group" /> Artigo 3<br>
</fieldset>

<fieldset>
<legend>jQuery-UI com a logica de não mostrar se selecionado</legend>
<input type="radio" class="uiComLogicaArtigo" 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."  class="uiComLogicaArtigo" name="tl-group" /> Artigo 2<br>
<input type="radio" title="Clique aqui para ver o resumo do artigo."  class="uiComLogicaArtigo" name="tl-group" /> Artigo 3<br>
</fieldset>

JavaScript

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

$('.uiArtigo').tooltip();
$('.uiComLogicaArtigo').tooltip();

/*logica para o UI*/
$('.uiComLogicaArtigo').on( "tooltipopen", function( event, ui ) {
	$('.radioArtigo').attr('title', 'Clique aqui para ver o resumo do artigo.'); 

	if($(this).is(':checked')) {
  	$(this).tooltip( "close" );
    $(this).attr('title', ''); 
  }  
});