JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div class="input-group"> <span class="input-group-addon">Username</span>

    <input id='reg_username_field' data-reg_div='username' type="text" class="form-control reg_form_field" placeholder="Username">
</div>
<div class='break_20'></div>
<div class="input-group"> <span class="input-group-addon">Email</span>

    <input id='reg_email_field' data-reg_div='email' type="text" class="form-control reg_form_field" placeholder="Email">
</div>
<div id='register_tip_div_username' data-reg_div_tooltip='username' class='reg_tooltip_div dn'>Usernames:
    <br />- Between 3 and 16 characters
    <br />- Are unique to each user
    <br />- Are used to log into your account
    <br />- Cannot be changed
    <br />
</div>
<div id='register_tip_div_email' data-reg_div_tooltip='email' class='reg_tooltip_div dn'>Email:
    <br />- Must be a valid email
    <br />- Requires varification after registration
    <br />
</div>

CSS

.dn {
    display: none;
}

JavaScript

$( document ).ready( function() {
	reg_tooltip();
});


function reg_tooltip() {
	$('.reg_form_field').click( function() {
		$('.reg_tooltip_div').hide();
		
		sec_id = $(this).attr('data-reg_div');
		//alert(sec_id); //testing
	
		$('.reg_tooltip_div[data-reg_div_tooltip="'+sec_id+'"]').show();

	});
}