DaniWeb Forum Index > Web Development > PHP

Tooltips for HTML links

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2006

Posts: 5

Reputation: madhav_2k is an unknown quantity at this point

Solved Threads: 0

madhav_2k

Offline

Newbie Poster

Tooltips for HTML links

Feb 22nd, 2007

i'm fascinated by the tooltip or the information bubble , which pops-up on this page when I point my cursor on a thread title.
Does anyone know what it takes to code something like that? Is it possible with PHP, javascript or AJAX ?

The attached image shows the tooltip I'm referring to!

Attached Thumbnails

•

Join Date: Aug 2005

Posts: 5,273

Reputation: iamthwee is a splendid one to behold

Solved Threads: 378

iamthwee

Offline

Posting Expert

Re: Tooltips for HTML links

Feb 22nd, 2007

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

*Voted best profile in the world*

•

Join Date: Feb 2008

Posts: 1

Reputation: dvsgr is an unknown quantity at this point

Solved Threads: 0

dvsgr

Offline

Newbie Poster

Re: Tooltips for HTML links

Feb 18th, 2008

Hi there,
I read your post about that cool imagetooltip.

Well here is the thing. I have tried it in php page with a static page but what about when you want dynamic content in the tool tip. I mean what If i have 40 products with their images and I want to show them accordingly.

here is some code I tried but it didnt worked.

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
mysql_data_seek($result, $i);					
 
								$newArray = mysql_fetch_assoc($result);
 
								$aa = $newArray['aa'];
 
								$Model = $newArray['Model'];
 
echo "messages[".$aa."] = new Array('".$Model.".pdf','',\"#FFFFFF\");\n";
mysql_data_seek($result, $i);					

								$newArray = mysql_fetch_assoc($result);

								$aa = $newArray['aa'];

								$Model = $newArray['Model'];

echo "messages[".$aa."] = new Array('".$Model.".pdf','',\"#FFFFFF\");\n";

and then in the actualy product list

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
echo "		  <td align=\"center\" bgcolor=\"#F2F5F7\"><A href=\"javascript:void(window.open('pdf/".$Model.".pdf', '', 'resizable=no,scrollbars=yes,status=yes,width=620,height=750'))\" onmouseover=\"doTooltip(event,".$aa.")\" onmouseout=\"hideTip()\" class=\"style17\">$Model</A></td>\n";
echo "		  <td align=\"center\" bgcolor=\"#F2F5F7\"><A href=\"javascript<b></b>:void(window.open('pdf/".$Model.".pdf', '', 'resizable=no,scrollbars=yes,status=yes,width=620,height=750'))\" onmouseover=\"doTooltip(event,".$aa.")\" onmouseout=\"hideTip()\" class=\"style17\">$Model</A></td>\n";

It did worked with one image (always the same but I would like to have a piicture for each different porduct. I have uploaded all products images on server as I did for pdfs.
Thanks in advance

Fotis

•

Join Date: Nov 2007

Posts: 86

Reputation: sagedavis is an unknown quantity at this point

Solved Threads: 6

sagedavis

Offline

Junior Poster in Training

Re: Tooltips for HTML links

Feb 19th, 2008

The way that I personally would be doing this is
setting a "while" statement as my query result which would include what is in your "echo", and then echoing the result in the html body itself.

The while statement itself means that you don't really have to deal with creating and manipulating arrays "by hand" as I like to say. it parses it on it's own, simply by making your final result something like

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
$myresult .= "<td align=\"center\" bgcolor=\"#F2F5F7\"><A href=\"javascript:void(window.open('pdf/".$Model.".pdf', '', 'resizable=no,scrollbars=yes,status=yes,width=620,height=750'))\" onmouseover=\"doTooltip(event,".$aa.")\" onmouseout=\"hideTip()\" class=\"style17\">$Model</A></td>\n";
$myresult .= "<td align=\"center\" bgcolor=\"#F2F5F7\"><A href=\"javascript<b></b>:void(window.open('pdf/".$Model.".pdf', '', 'resizable=no,scrollbars=yes,status=yes,width=620,height=750'))\" onmouseover=\"doTooltip(event,".$aa.")\" onmouseout=\"hideTip()\" class=\"style17\">$Model</A></td>\n";

And then, in your html body

Help with Code Tags

PHP Syntax (Toggle Plain Text)

echo $myresult;

The dot before the = is required to make it loop itself (I think).

•

Join Date: Feb 2008

Posts: 9

Reputation: squid44th is an unknown quantity at this point

Solved Threads: 0

squid44th

Offline

Newbie Poster

Re: Tooltips for HTML links

Feb 22nd, 2008

I prefer to use the css version of the tool tip.

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
<style type="text/css">
#info p {margin-left:15px; margin-right:20px;}
#info img {margin:15px; float:left;}
#info h1 {margin-left:15px;}
/* the style starts here */
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:150px;}
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; background:#fff url(tooltip.gif) 0 0; display:block; font-size:1px;}
</style>
<style type="text/css">
#info p {margin-left:15px; margin-right:20px;}
#info img {margin:15px; float:left;}
#info h1 {margin-left:15px;}
/* the style starts here */
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:150px;}
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; background:#fff url(tooltip.gif) 0 0; display:block; font-size:1px;}
</style>

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
<a class="tooltip" href="link or anchor">Display<b><em></em>The text in tool tip</a>
<a class="tooltip" href="link or anchor">Display<b><em></em>The text in tool tip</a>