View Full Version : Hovering over text boxes
Dooley
04-08-2008, 02:44 PM
Hi,
I've been using alerts in my code to provide more information on a piece of text.
So when a user hovers over a piece of text an alert box comes up with some information on the text, then the user must click Ok to close the box that pops up. I find this step quite annoying and want to replace it.
I was wondering if its possible in ajax to have a box with some text box up when hovering over a piece of and then go away when the user is not hovering over the text?
Can someone point me in the right direction?
Thanks in advance.
Dooley
04-08-2008, 04:43 PM
Actually I have partially solved my problem.
I can get a pop by calling this function when I hover over a string.
<script type=\"text/javascript\">
function ShowPopup$i(hoveritem)
{
hp = document.getElementById(\"hoverpopup\");
// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;
// Set popup to visible
hp.style.visibility = \"Visible\";
}
function HidePopup()
{
hp = document.getElementById(\"hoverpopup\");
hp.style.visibility = \"Hidden\";
}
</script>
This php script is setting the popup to visible. Im basically calling the javascript and creating the pop-up in a loop.
echo "<a id=\"hoverover\" style=\"cursor:default;\" onMouseOver=\"ShowPopup(this);\" onMouseOut=\"HidePopup$int();\"><i>$qword</i></a>";
echo "<div id=\"hoverpopup\" style=\"visibility:hidden; position:absolute; top:0; left:0;\"><table bgcolor=\"#0000FF\">
<tr><td><font color=\"#FFFFFF\">Definition</font></td></tr>
<tr><td bgcolor=\"#8888FF\">$string</td></tr></table></div>";
However I can only run this on one $string, every other time I try call the showpopup it just brings up the 1st definition, how do I go about calling this function a few times?
To clarify I want
Some Text 1 -->[PopUp:Here is info on some text1]
Some Text 2 -->[PopUp:Here is info on some text 2]
.
.
.
Some Text N -->[PopUp:Here is info on some textN]
What im getting is
Some Text 1 -->[PopUp:Here is info on some text1]
Some Text 2 -->[PopUp:Here is info on some text1]
.
.
.
Some Text N -->[PopUp:Here is info on some text1]
Please help, if I can solve this I will be set, thank you!
A1ien51
04-08-2008, 09:55 PM
This has nothing to do with Ajax unless you are going back to the server for information.
If you want to change the text, you need to pass in the text and set the div's innerHTML with the new value.
There are a lot of tooltip scripts out there if you do not want to reinvent the wheel. Have a look here: http://www.dynamicdrive.com/dynamicindex5/
Eric
Dooley
04-08-2008, 11:18 PM
Cheers, that link was perfect!
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.