Pagina 1 din 1
Tooltip cu tabel html la caseta input
Scris: Dum Feb 15, 2015
de 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.
Tooltip cu tabel html la caseta input
Scris: Lun Feb 16, 2015
de MarPlo
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:
Tooltip cu tabel html la caseta input
Scris: Lun Feb 16, 2015
de andras
Inainte de :
<div id="div_tabel">Aici se adauga tabelul html</div>
trebuie sa folosesc Ajax() sa fac SELECT-u din MYSQL?
Tooltip cu tabel html la caseta input
Scris: Lun Feb 16, 2015
de MarPlo
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.