Ad:

PHP Discussion Thread
Unsolved
Views: 3085

Feb 22nd, 2007

Tooltips for HTML links

Expand Post »

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

Click image for larger version

Name: tt.JPG
Views: 40
Size: 26.6 KB
ID: 2870

Similar Threads

Javascript links never work in IE6 in Web Browsers
index.html AND home.html WHY? in HTML and CSS
HTML-CSS trouble in HTML and CSS
Passing values from server-side code to html in ASP.NET
This is an html problem in HTML and CSS

madhav_2k

Reputation Points: 9

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Apr 2006

Permalink

Feb 22nd, 2007

Re: Tooltips for HTML links

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

iamthwee

Featured Poster

Reputation Points: 1536

Solved Threads: 431

Posting Expert

Offline

5,865 posts
since Aug 2005

Permalink

Feb 18th, 2008

Re: Tooltips for HTML links

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.

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

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

dvsgr

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Feb 2008

Permalink

Feb 19th, 2008

Re: Tooltips for HTML links

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

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

PHP Syntax (Toggle Plain Text)

echo $myresult;

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

sagedavis

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

86 posts
since Nov 2007

Permalink

Feb 22nd, 2008

Re: Tooltips for HTML links

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

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>

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>

found it at CSS Play

Attached Thumbnails

Click image for larger version

Name: css-tooltip.jpg
Views: 191
Size: 18.1 KB
ID: 5211

squid44th

Reputation Points: 43

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Feb 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in PHP Forum Timeline: Which one is the Best PHP editor

Next Thread in PHP Forum Timeline: PHP / SQL Delete From Statement Not working with URL?

DaniWeb Message

Cancel Changes

User Name
Password