Tooltip with html table to input field

PloMar
Posts: 48

Tooltip with html table to input field

Hello
I have an input text field to which i want to display a tooltip with a html table, when the mouse is over the input field.
How can i make it with JavaScript /CSS, any ideea or example?
This is the html code with a Div that will contains the table, and the input text field.

Code: Select all

<div id="cnt"> <div id="div_tab">Here to add the html table</div> <input type="text" id="id_inp"/> </div>
Thanks.

Admin
Hello
Set "position:relative;" to the parent container (it is important for absolute position), then set "position: absolute;", "display: none;" and other CSS properties to the Div with the html table.
In javascript you can use this code:

Code: Select all

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

Code: Select all

<style> #cnt { position:relative; } #id_inp { margin-top:40px; } #div_tab { position: absolute; display: none; top: 0; left: 18px; width:150px; border:2px solid #33f; background: #eee; } </style> <div id="cnt"> <div id="div_tab">Here to add the html table</div> <input type="text" id="id_inp"/> </div>
Demo:
Here to add the html table
- Hover this input field

Similar Topics