2

Estou querendo adicionar ao meu código um "HELP", tipo caso ele clique na palavra ele abra um pop-up mostrando os detalhes dos campos. Mas eu gostaria de fazer isso com um arquivo .txt ... Onde abra uma pop-up contendo o texto do .txt! Eu fiz isso em tooltip que abre um pequeno balão contendo umas informações:

<style> .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;
}
</style>
<tr>
  <td align="right">
    <font face="arial" color="blue" size="-1">Senha do Usuário :</font>
  </td>
  <td>
    <input type="text" align="left" name="tx_senh_usua" size="7" value="SEDS" readonly="true">
    <span style="color: blue;" data-title="Senha padrão para novos usuários." class="tooltip">?</span>
  </td>
</tr>

Tem como chamar um arquivo .txt ao selecionar ou quando clicar da mesma forma?

5
  • O conteudo do .txt dentro do tooltip? ou tem que ser uma popup mesmo? Commented 5/12/2014 às 13:02
  • Teria que ser uma popup, mas não como um alert e-e' Eu mostrei um exemplo com o tooltip, porque é um exemplo mais "chamativo".
    – Alexandre
    Commented 5/12/2014 às 13:04
  • 1
    Você vai ter que ler esse TXT de alguma forma, não vai dar pra fazer só via HTML e CSS Commented 5/12/2014 às 13:05
  • Qual linguagem está usando no backend? Commented 5/12/2014 às 13:06
  • Sim @KhaosDoctor, tenho em mente que terei de utilizar JS ou alguma outra linguagem para ler o .txt, mas não sei como fazer que apareça como uma pop-up esse arquivo .txt!
    – Alexandre
    Commented 5/12/2014 às 13:09

2 Respostas 2

2

Bom para ler um arquivo .txt necessita de uma linguagem backend(roda no lado servidor). Abaixo um exemplo seria utilizando PHP que é a forma mais fácil e rápida:

<?php
    $txt = file_get_contents("arquivo.txt");
?>
<span style="color: blue;" data-title="<?php echo $txt ?>" class="tooltip">?</span>
1
  • Isso sim me ajudou muito @AntonyAlkmim! Muito obrigado!
    – Alexandre
    Commented 5/12/2014 às 13:19
1

Para abrir um ficheiro tem de fazer do lado do servidor, PHP no seu caso.

Para abrir o ficheiro pode usar o fopen() e para ler linha a linha pode usar o fgets().

$ficheiro = fopen("inputfile.txt", "r");
$texto = array();
if ($ficheiro) {
    while (($linha = fgets($ficheiro)) !== false) {
        // aqui pode trabalhar com o conteúdo da linha
        // no exemplo crio uma array com o conteudo da linha
        $chave_valor = explode("~>", $linha);
        $texto[$chave_valor[0]] = $chave_valor[1];
    }
} else {
    // caso dê erro
} 
fclose($ficheiro);

// e agora pode exportar esse conteudo para o JavaScript
echo json_encode($texto);
4
  • O $texto no caso vai conter o que está no conteúdo do .txt né?
    – Alexandre
    Commented 10/12/2014 às 16:33
  • E para abrir ele conforme o focus ele muda a tooltip?
    – Alexandre
    Commented 10/12/2014 às 16:35
  • @Alexandre "$texto no caso vai conter o que está no conteúdo" => sim. Vou atualizar a outra resposta daqui a pouco para continuar a ideia aqui.
    – Sergio
    Commented 10/12/2014 às 17:34
  • está ok @Sergio, retirou bem minha duvida!
    – Alexandre
    Commented 11/12/2014 às 10:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .