How to switch txt message according to the field’s Focus

Question

In that question I saw how to read the .txt ~> Read txt

Now I want to know: In case I leave a field on phocus, and is about the message of tooltip, it must show a message concerning that field.

Ex: In case I leave the password field with phocus and go over the "?" of tooltip it must show a message concerning the password field. And should you leave the name field with phocus, show a message concerning it.

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

Simplifying ... I want to create a file containing messages for various fields. And if the field is in phocus and the "?" of tooltip, he should check in that file which message to the given field!

It is possible to do this?

Answer 1

To do this you need Javascript to change the content of Tooltip.

A suggestion is to also use a field data- inputs that have Focus and fetch this string inside the tooltip. In the example below I also changed the classes a little to be able to remove the tooltip if there is no phocus.

Example:

<input type="text" data-title="Senha padrão para novos usuários." align="left" name="tx_senh_usua" size="7" value="SEDS">

Javascript:

document.querySelector('.tltp').onmouseover = function () {
    if (document.body == document.activeElement) return this.classList.remove('tooltip');
    var texto = document.activeElement.getAttribute("data-title");
    if (texto) {
        this.setAttribute("data-title", document.activeElement.getAttribute("data-title"));
        this.classList.add('tooltip');
    }
}

jsFiddle: http://jsfiddle.net/q34zd30s/

I could create an array in JS with these tooltips and compile directly from PHP to JS.

---

Following the idea I presented in your other question will receive from PHP something like:

'{"tx_senh_usua":"Senha do Usu\u00e1rio :","tx_nome_usua":"Nome :"}'

So you can compile on the client side:

var json = JSON.parse(<a string do servidor>);

To fetch this info in tooltip you can do so:

var texto = json[document.activeElement.name]; 
this.setAttribute("data-title", texto);

Example: http://jsfiddle.net/9s3ck057/