Tooltip cu tabel html la caseta input

[andras]

Salut,
Vreau sa fac un fel de tooltip pe un <input type="text"> care contine o data calendaristica. Avind data afisata in input, vreau sa fac un SELECT in tabela MySQL cu filtru pe data respectiva si imi rezulta un tabel html cu 5-10 linii si 3-4 coloane pe care vreau sa-l afisez (intr-un div) la onmouseover pe input. Ceva idei? Multumesc.

Salut
Din CSS setezi "position: absolute;", "display: none;" si ce proprietati vrei la Div-ul cu acel tabel ca sa-l pozitionezi, adaugi un ID la acea caseta input, iar in javascript aplici acest cod (modifici in cod cu ce id-uri folosesti):

Cod: Selectaţi tot

<script>
var inp_txt = document.getElementById('id_input');
var div_table = document.getElementById('div_tabel');
inp_txt.addEventListener('mouseover', function(){div_table.style.display = 'block';});
inp_txt.addEventListener('mouseout', function(){div_table.style.display = 'none';});
</script>

Exemplu:

Cod: Selectaţi tot

<style>
#id_input {
  margin-top:40px;
}
#div_tabel {
  position: absolute;
  display: none;
  top: 1px;
  left: 15px;
  width:150px;
  border:2px solid #33f;
}
</style>

<div id="div_tabel">Aici se adauga tabelul html</div>
<input type="text" id="id_input"/>
<script>
var inp_txt = document.getElementById('id_input');
var div_table = document.getElementById('div_tabel');
inp_txt.addEventListener('mouseover', function(){div_table.style.display = 'block';});
inp_txt.addEventListener('mouseout', function(){div_table.style.display = 'none';});
</script>

Demo:

Aici se adauga tabelul html

- Hover this input field

Inainte de :
<div id="div_tabel">Aici se adauga tabelul html</div>
trebuie sa folosesc Ajax() sa fac SELECT-u din MYSQL?

Adaugi tabelul html in acel Div dupa cum stii.
Din php, daca pagina e creata cu php, ori cu o functie Ajax, adaugata dupa Div-ul pentru tabel.