PDA

View Full Version : Cool DHTML tooltip script



juanschwartz
07-30-2006, 05:37 AM
1) Script Title: Cool DHTML tooltip script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

3) Describe problem: Is there an easy way to add the text color into the function or has this already been done elsewhere?

jr_yeo
07-30-2006, 05:45 AM
this already been done elsewhere?
search the DD forums :p

jscheuer1
07-30-2006, 06:10 AM
This is a pretty good way to have that kind of control:

http://www.dyn-web.com/dhtml/tooltips/

It is the latest from the author of DD's:

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

and works in more browsers but is 'creditware'. Here is an intermediate version I put together in another thread:

http://www.dynamicdrive.com/forums/showpost.php?p=42041&postcount=5

juanschwartz
07-30-2006, 02:46 PM
This is a pretty good way to have that kind of control:

http://www.dyn-web.com/dhtml/tooltips/

It is the latest from the author of DD's:

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

and works in more browsers but is 'creditware'. Here is an intermediate version I put together in another thread:

http://www.dynamicdrive.com/forums/showpost.php?p=42041&postcount=5
I looked at those, but they set the text/html in the JS and I need something that I can use PHP vars on as I'm pulling the tooltip data from a mysql db.

jscheuer1
07-30-2006, 05:31 PM
I looked at those, but they set the text/html in the JS and I need something that I can use PHP vars on as I'm pulling the tooltip data from a mysql db.

If you look at the entire thread:

http://www.dynamicdrive.com/forums/showthread.php?p=42041#post42041

You will see that the tips can be entered just about anywhere in the first linked code from my previous post. However, as I really didn't know what you meant by:


add the text color into the function

and now see that you want (probably) to add it in at the mouse event, you can do that with the script you mentioned, it is just a little tricky, ex:


onMouseover="ddrivetip('<span style=\'color:red;\'>JavaScriptKit.com JavaScript tutorials</span>','yellow', 300)"

as you cannot use the traditional double quotes to delimit a tag's attribute value inside the event call and, though you can use single quotes as a substitute, you need to escape them (as shown above) with a down slash (\).

You could alternatively modify the ddrivetip() function to look like so:


function ddrivetip(thetext, thecolor, thewidth, textcolor){
if (ns6||ie){
if (typeof thewidth!="undefined" && thewidth!="") tipobj.style.width=thewidth+"px";
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor;
if (typeof textcolor!="undefined" && textcolor!="") tipobj.style.color=textcolor;
else
tipobj.style.color='';
tipobj.innerHTML=thetext;
enabletip=true;
return false;
}
}


Then you could set the text color as the last argument here:


onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300, 'red')"