Tooltips for HTML links

[madhav_2k]

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!

[iamthwee]

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

[dvsgr]

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.

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

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";

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

[sagedavis]

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

$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";

And then, in your html body

echo $myresult;

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

[squid44th]

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

<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>

<a class="tooltip" href="link or anchor">Display<b><em></em>The text in tool tip</a>

found it at CSS Play