Tooltips not working in Joomla

[Romuba]

1) Script Title: Image w/ description tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agetooltip.htm

3) Describe problem: I have successfully installed this script on a standard website http://www.kemklean.co.za/what_we.php and all works correctly.

I have now rebuilt this website using Joomla http://www.kemklean.co.za/files/syst...o-for-you.html but now the tooltips don't show.

I have literally spent hours sifting through the code etc. but cannot find the problem.

Any help will be much appreciated.

[ddadmin]

Your messages array isn't set up properly, for example:

messages[0] = new Array('images/stories/kemklean_images/what_we_can_do/preferential.png','',"");
messages[1] = new Array('images/stories/kemklean_images/what_we_can_do/peace.png','',"");
messages[2] = new Array('images/stories/kemklean_images/what_we_can_do/microbiology.png','',"");

There should not be a 3rd parameter, and for the 2nd parameter, it should be a color name such as:

messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");

[Romuba]

Hi ddadmin

I'm somewhat confused. You say that there musn't be a 3rd parametre but the array asks for 1) Image ref, 2) Text and 3) background color.

I only want the image to display but no text and background.

It works perfectly in a static site but doesn't work in the Joomla site.

[ddadmin]

Ah yes you're right, there should be 3 parameters like you have right now, not two. It got it wrong. Looking at the problem page again, the issue just seems to be invalid references to the images, for example:

messages[0] = new Array('images/stories/kemklean_images/what_we_can_do/preferential.png','',"");

The above assumes that the image is located at:

http://www.kemklean.co.za/files/systems/images/stories/kemklean_images/what_we_can_do/preferential.png

which as you can see isn't so.

[Romuba]

Once again I'm confused ddadmin

I have my image ref as:

images/stories/kemklean_images/what_we_can_do/preferential.png

and then you make it as:

http://www.kemklean.co.za/files/syst...eferential.png

Is the full ref for my image not:

http://www.kemklean.co.za/files/imag...eferential.png

I'm not sure why you have added the "system" directory into the url.

[ddadmin]

The problematic page is located at:

http://www.kemklean.co.za/files/systems/what-can-we-do-for-you.html

While inside it, your message array looks like so:

messages[0] = new Array('images/stories/kemklean_images/what_we_can_do/preferential.png','',"");
messages[1] = new Array('images/stories/kemklean_images/what_we_can_do/peace.png','',"");
messages[2] = new Array('images/stories/kemklean_images/what_we_can_do/microbiology.png','',"");
messages[3] = new Array('images/stories/kemklean_images/what_we_can_do/cleaning.png','',"");
messages[4] = new Array('images/stories/kemklean_images/what_we_can_do/coded.png','',"");
messages[5] = new Array('images/stories/kemklean_images/what_we_can_do/budget.png','',"");
messages[6] = new Array('images/stories/kemklean_images/what_we_can_do/hygiene.png','',"");
messages[7] = new Array('images/stories/kemklean_images/what_we_can_do/msds.png','',"");
messages[8] = new Array('images/stories/kemklean_images/what_we_can_do/operations.png','',"");

Since the above image paths are relative, it means the browser will look for them starting in the systems/ directory, or the directory the problem page is located at, such as:

http://www.kemklean.co.za/files/systems/images/stories/kemklean_images/what_we_can_do/preferential.png

That's why the images are not appearing. To fix this, you can simply specify absolute URLs to the images in your messages array so they point to the correct location on your server.

[stringcugu]

replace the script
put this in
<script type="text/javascript">
/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */
var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;
var origWidth, origHeight;
// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }
/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 250;
var offX= 0; // how far from mouse to show tip
var offY= 5;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "";
var tipBorderColor= "";
var tipBorderWidth= 3;
var tipBorderStyle= "";
var tipPadding= 4;
// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('http://www.kemklean.co.za/images/what_we_can_do/preferential.png','',"");
messages[1] = new Array('http://www.kemklean.co.za/images/what_we_can_do/peace.png','',"");
messages[2] = new Array('http://www.kemklean.co.za/images/what_we_can_do/microbiology.png','',"");
messages[3] = new Array('http://www.kemklean.co.za/images/what_we_can_do/cleaning.png','',"");
messages[4] = new Array('http://www.kemklean.co.za/images/what_we_can_do/coded.png','',"");
messages[5] = new Array('http://www.kemklean.co.za/images/what_we_can_do/budget.png','',"");
messages[6] = new Array('http://www.kemklean.co.za/images/what_we_can_do/hygiene.png','',"");
messages[7] = new Array('http://www.kemklean.co.za/images/what_we_can_do/msds.png','',"");
messages[8] = new Array('http://www.kemklean.co.za/images/what_we_can_do/operations.png','',"");
//////////////////// END OF CUSTOMIZATION AREA ///////////////////
// preload images that are to appear in tooltip
// from arrays above
if (document.images){
var theImgs = new Array();
for (var i=0; i<messages.length; i++){
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];}}
// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';
////////////////////////////////////////////////////////////
// initTip- initialization for tooltip.
//Global variables for tooltip.
//Set styles
//Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip(){
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']:(ie5||ns5)?document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5){ // ns4 would lose all this on rewrites
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;}
if (tooltip&&tipFollowMouse){
document.onmousemove = trackMouse;}}
window.onload = initTip;
/////////////////////////////////////////////////
//doTooltip function
//Assembles content for tooltip and writes
//it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5){
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);}
var mouseX, mouseY;
function trackMouse(evt){
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);}
/////////////////////////////////////////////////////////////
//positionTip function
//If tipFollowMouse set false, so trackMouse function
//not being used, get position of mouseover event.
//Calculations use mouseover event position,
//offset amounts and tooltip width to position
//tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse){
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);}
function hideTip(){
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;}
document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')
</script>

[Romuba]

Thanks to to both of you for the suggestions but still nothing working.

I initially made the URL absolute but no change. I then replaced the script with the suggested one, no change. If you look now you will see that I now have the URL's mixed in relative and absolute but still nothing works.

messages[0] = new Array('http://www.kemklean.co.za/files/images/stories/kemklean_images/what_we_can_do/preferential.png','',"");
messages[1] = new Array('images/stories/kemklean_images/what_we_can_do/peace.png','',"");
messages[2] = new Array('http://www.kemklean.co.za/images/what_we_can_do/microbiology.png','',"");
messages[3] = new Array('http://www.kemklean.co.za/images/what_we_can_do/cleaning.png','',"");
messages[4] = new Array('http://www.kemklean.co.za/images/what_we_can_do/coded.png','',"");
messages[5] = new Array('http://www.kemklean.co.za/images/what_we_can_do/budget.png','',"");
messages[6] = new Array('http://www.kemklean.co.za/images/what_we_can_do/hygiene.png','',"");
messages[7] = new Array('http://www.kemklean.co.za/images/what_we_can_do/msds.png','',"");
messages[8] = new Array('http://www.kemklean.co.za/images/what_we_can_do/operations.png','',"");

[stringcugu]

your script is not working in
http://www.kemklean.co.za/files/syst...o-for-you.html

so copy the script from
http://www.kemklean.co.za/what_we.php
that's what i did
and add the link to it
http://www.kemklean.co.za/
in all the 9 messages[0]

messages[0] = new Array('http://www.kemklean.co.za/images/what_we_can_do/preferential.png','',"");

[Romuba]

Hi stringcugu

At last I have it working correctly. I'm sure that this is how I had things initially but obviously not.

This is sure a brilliant little script that I was very upset when I couldn't get it working. I then spent a couple of hours searching through Joomla extensions but nothing came close to how great this one works.

Thanks your your help.