JSFiddle - React, Tailwind, and code Playground

by Felipe Eduardo

HTML

<table border="0" width="100%">
			<tr>
				<td width="30%" align="right" >
					<font face="arial" color="blue" size="-1" disabled="">Nome do Usuário :	</font>
				</td>
				<td width="29%" align="left">
					<input type="text" align="left"  onfocus="Aalerta(this.name)" name="tx_nome_usua"  size="15" maxlength="40" value="" >
				</td>
			</tr>
			<tr>
				<td align="right" >
					<font face="arial" color="blue" size="-1">RG do Usuário :</font>
				</td>
				<td>
					<input name="tx_rg_usua" method="POST" onfocus="Aalerta(this.name)" type="text" id="rg"  maxlength="13" size="16">
				</td>
			</tr>
			<tr>
				<td align="right">
					<font face="arial" color="blue" size="-1">Telefone do Usuário :</font>
				</td>
				<td>
					<input name="tx_fone_usua" id="tx_fone_usua" method="POST" type="text" size="15" maxlength="14" onkeydown="Mascara(this,Telefone);" onkeypress="Mascara(this,Telefone);" onkeyup="Mascara(this,Telefone);" onclick="TelefoneCall">
				</td>
								
				<td>
					<input type="hidden" name="w_nome_usua" value="<?=$w_nome_usua;?>">
				</td>
<td><span name="tooltip" style="color: blue;" data-title="<?php echo $campo[$j]?>" class="tooltip">?</span></td>                    
			</tr>

CSS

.tooltip {
    display: inline;
    position: relative;
}
.tooltip:hover:after {
    padding: 5px 15px;
    width: 220px;
    border-radius: 5px;
    background: #333;
    background: rgba(0, 0, 0, .8);
    content: attr(data-title);
    position: absolute;
    left: 20%;
    bottom: 26px;
    z-index: 98;
    color: #fff;
}
.tooltip:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0px 6px;
    content:"";
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 99;
}

JavaScript

<?php //trecho do php
$i = 0;
$ficheiro = fopen("teste.txt", "r");
if ($ficheiro) {
    while (($linha = fgets($ficheiro)) !== false) {
        $chave_valor = explode("~>", $linha);
        $campo[$i] = $chave_valor[0];
		$campo[$i+1] = $chave_valor[1];
       $i = $i+2;    
    }
} 
?>
//parte do JS
function Aalerta(nome){
	
	switch(nome){
		case 'tx_nome_usua' :
			alert("@");
			var value = 1;
			document.getElementsByName('tooltip')[0].setAttribute("data-title",[+ value]); 			
		break;
		case 'tx_rg_usua' :
			<?php  $j = 3;?>
		break;
	}
	
	return true;
 
  }