Jump to content

Hover to view hidden box

smerny

By smerny
in CSS

Recommended Posts

smerny Member

smerny

Posted
Posted

How can I make it so I have text that says "Hoover to View Comment" and when someone puts mouse on that text, it displays a simple box with the comment inside of it?I started to attempt this with this:"<a href='#' class='popup'>Hoover to View Comment</a>"and say the comment is in a php variable named $pr['comment']... i started thinking about the CSS behind this but i don't know how i would make the comment show up.thanks for any help

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
Posted

Hm. PHP is processed before HTML (confusingly, it is supposed to stand for Hypertext Pre-Processor - surely that would be HPP?). So a variable stored in PHP has to be dropped into HTML or JavaScript first. For example, say you have a div that holds the PHP variable, you would do something like:

<div id="comment"><?php echo $pr['comment']; ?></div>

In the CSS, you would put:

#comment {display: none;}

to hide it.You would need to put this in the CSS to make the div appear when you hovered over the link:

a.popup :hover #comment {display: block;}

I would suggest giving the link an id instead of a class, as surely you only want one trigger to make the div appear. If you wanted an actual popup, you would need to use JavaScript, something like:

<script type="text/javascript">var comment = '<?php echo $pr['comment']; ?>';document.getElementById('popup').onmouseover = alert(comment);</script>

Link to comment
Share on other sites
smerny Member

smerny

Posted
  • Author
Posted

actually, this will be in a loop while pulling records from the database and making a table with them.for example, if i were to just show the comment, it would look like

while($pr = mysql_fetch_assoc($result)){	 echo "	 <tr>	   .....	   <td>". $pr['comment'] ."</td>	   .....	 </tr>";}

but sometimes the comments can be big (paragraphs) and i would rather not stretch my table for that, which is why i would rather have a mouse over that displays the comment within a box... much like the way CSS drop down menus display a list of links

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

could use the same principle as used in sucker fish menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#like_menu ul {	list-style: none;}#like_menu ul li {	position: relative;	}	/*first sublevel */#like_menu li ul { 	width:200px;	position: absolute;	left: -999em;	}	#like_menu li:hover ul {	left: 200px;	top:200px;	border: 1px solid #000;}</style></head><body><div id="like_menu"><ul><li><a href="java script:void(null)"><span class="topmenu_text_align">Hover to View Comment</span></a>	<ul>	<li>Hover comment, Hover comment, Hover comment, Hover comment</li>	</ul></li></ul></div></body></html>

No tables, (good), No javascript, (better), all you have to do populate the second <li>.... </li> using $pr['comment']

Link to comment
Share on other sites
smerny Member

smerny

Posted
  • Author
Posted

well, i'm using tables because the information i am outputting is very tabular type information. i'll try putting the div/ul within a td though and see what happens

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...