How to switch txt message according to field focus

Navigation
0

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

Now I want to know: If I leave a field in focus , and it's about the tooltip message, it should show a message regarding that field. >

Ex: If I leave the password field with focus and go over the tooltip it should display a message regarding the password field . And if you leave the field name with focus , show a message regarding 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 several fields. And if the field is in focus and you select the tooltip from tooltip , it should check in that file which message for the given field !

Is it possible to do this?

    
asked by anonymous 10.12.2014 / 12:31

1 answer

1

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

One suggestion is to also use a data- field in the inputs that have focus and fetch that string into the tooltip. In the example below I also changed the classes a bit so that I can remove tooltip if there is no focus.

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: link

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 get 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 get this info in the tooltip you can do this: 

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

Example: link

    
10.12.2014 / 13:08
Sort values from one li by date C # How to put a SQL command in a variable