Jump to content

popup window in table


Guest kanuski

Recommended Posts

Guest kanuski

I have a table generated by php and mysql. Items in the table use a mouseover for more details. The problem is that the page is long and the popup window is showing up at the top of the page. If i change the positioning the popup shows up in the table itself.

View page

This is the code on the page

	echo "<span id=\"popup$oid\" class=\"popup\">$outcome</span>";
echo "<a href=\"javascript:void(0);\"";
echo "onMouseover=\"ShowPop('popup$oid');\"";
echo "onMouseout=\"HidePop('popup$oid');\">$code</a>";

and the code that defines the popup:

.popup
{
  position:absolute; left: 20px; width:400px;
  border-style:solid;
  border-width:2;
  border-color:#2a5679;
  background-color:#fffcc8;
  padding:5px;
  color:black;
  font-family:Arial;
  font-weight:bold;
  font-size:10pt;
  z-index:101;
  visibility:hidden;
}

I would love a simple fix but I think I may have to redesign the whole page without the tables.

Link to comment
Share on other sites

With the current code, I don't think there is an easy fix to this. However, could you perhaps use Javascript to set the position of the popup? For example, use Javascript to get the position on the page of the link that's currently being hovered over, and then pass in the value into the showPop function, which would set the popup's top value?

 

Other than that, I'm sure there are a huge number of tooltip scripts online that you could implement rather than trying to create something yourself. You shouldn't have any trouble finding one that positions the tooltip relative to the link being hovered over.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...