Forum

Posted: **16 Feb 2015, 09:27**

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.

Posted: **16 Feb 2015, 09:32**

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

Forum

Tooltip with html table to input field

Tooltip with html table to input field

Tooltip with html table to input field