Hi,
I looking for some javascript I could I use so that when you hover over a DIV it will show a small box with additional information. The ones I found so far open an actual new browser window - this is not what I need, I need it to display a small box which I can style.
Anybody got any links or pointers for something that can do this?
Thanks
JS mini window?
Moderator: General Moderators
Re: JS mini window?
you could do something like this:
Code: Select all
function showdiv(divtoshow){ if (document.getElementById) document.getElementById(divtoshow).style.visibility = 'visible'; else { if (document.layers) // Netscape 4 document.divtoshow.visibility = 'visible'; else // IE 4 document.all.divtoshow.style.visibility = 'visible'; }} function hidediv(divtohide){ if (document.getElementById) document.getElementById(divtoshow).style.visibility = 'hidden'; else { if (document.layers) // Netscape 4 document.divtoshow.visibility = 'hidden'; else // IE 4 document.all.divtoshow.style.visibility = 'hidden'; }}Code: Select all
<div id="showndiv" onmouseover="showdiv('hiddendiv')" onmouseout="hidediv('hiddendiv')"><p>Mouseover this div to show another div</p></div> <div id="hiddendiv" style="visibility: hidden"><p>This was hidden!</p></div>Re: JS mini window?
What you're looking for is generally called a 'tooltip'. If you're familiar with jQuery, there's a nice jQuery tooltip plugin. If you want to stay away from frameworks (can't imagine why but that's your choice), look up the overLib library.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.