tooltip on page load

[rich1234]

Hi, I have a javascript tooltip. At the moment Its on mouseover. I was just wondering if its possible to fire a tooltip on page load, ie when someone comes to the page? Its just a thought but prob not possible as I cannot find any info by searching.
Thanks for any info in advance
Richard

[rangana]

Try to replace the onmouseover event with onload.

If your script uses the onload event already, remove the onmouseover function on it.
Otherwise, please up a link to the page in question so that we can see the codes.

[rich1234]

Hi, Thanks, I had tried that but it didnt work.
the only reference to the mouseover apart from in the link is here

function doTooltip(e, msg) {
  if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
  Tooltip.show(e, msg);
}

function hideTip() {
  if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
  Tooltip.hide();
}

onload=function(){
Tooltip.init();
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
document.links[i_tem].onmouseover=function(e){if (e)doTooltip(e, eval(this.id));else doTooltip(event, eval(this.id));}
document.links[i_tem].onmouseout=hideTip;
}
}

I tried replacing with onload there too.

The link is as follows with an asp inside. It works fine onmouseover just was wondering if you could get it working on page load.

<a onmouseover="doTooltip(event,'<img src=&quot;<%=Server.URLPathEncode(CStr(thumbnail))%>&quot; div class=&quot;tp2&quot;>name<div>' )" onmouseout="hideTip()" href="/link.asp?id=6" >link</a>

Thanks anyway
Richard

[rangana]

Try to add highlighted:

onload=function(){
Tooltip.init();
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
document.links[i_tem].onmouseover=function(e){if (e)doTooltip(e, eval(this.id));else doTooltip(event, eval(this.id));}
document.links[i_tem].onmouseout=hideTip;
doTooltip(event,'<img src=&quot;<%=Server.URLPathEncode(CStr(thumbnail))%>&quot; div class=&quot;tp2&quot;>name<div>' )

}
}

This was'nt tested so there might be problem, but maybe worth a try.

[jscheuer1]

You will probably need to spoof the event. This cannot always be done, it depends upon what the script needs from the event. I seem to recall you were using dyn-web's image tool tip. Am I right? In any case I would need to see the code to find out what the script expects to find from the event.

[rich1234]

Dear John, You are right its the dyn-web tooltip. I tried what you suggested but it didnt work
The tooltip event is as follows, the other files dont seem related

var Tooltip = {
    followMouse: false,
    offX: 8,
    offY: 12,
    tipID: "tipDiv",
    showDelay: 100,
    hideDelay: 200,
ready:false,timer:null,tip:null,init:function(){if(document.createElement&&document.body&&typeof document.body.appendChild!="undefined"){if(!document.getElementById(this.tipID)){var el=document.createElement("DIV");el.id=this.tipID;document.body.appendChild(el);}this.ready=true;}},show:function(e,msg){if(this.timer){clearTimeout(this.timer);this.timer=0;}if(!this.ttready)return;this.tip=document.getElementById(this.tipID);if(this.followMouse)dw_event.add(document,"mousemove",this.trackMouse,true);this.writeTip("");this.writeTip(msg);viewport.getAll();this.positionTip(e);this.timer=setTimeout("Tooltip.toggleVis('"+this.tipID+"', 'visible')",this.showDelay);},writeTip:function(msg){if(this.tip&&typeof this.tip.innerHTML!="undefined")this.tip.innerHTML=msg;},positionTip:function(e){if(this.tip&&this.tip.style){var x=e.pageX?e.pageX:e.clientX+viewport.scrollX;var y=e.pageY?e.pageY:e.clientY+viewport.scrollY;if(x+this.tip.offsetWidth+this.offX>viewport.width+viewport.scrollX){x=x-this.tip.offsetWidth-this.offX;if(x<0)x=0;}else x=x+this.offX;if(y+this.tip.offsetHeight+this.offY>viewport.height+viewport.scrollY){y=y-this.tip.offsetHeight-this.offY;if(y<viewport.scrollY)y=viewport.height+viewport.scrollY-this.tip.offsetHeight;}else y=y+this.offY;this.tip.style.left=x+"px";this.tip.style.top=y+"px";}},hide:function(){if(this.timer){clearTimeout(this.timer);this.timer=0;}this.timer=setTimeout("Tooltip.toggleVis('"+this.tipID+"', 'hidden')",this.hideDelay);if(this.followMouse)dw_event.remove(document,"mousemove",this.trackMouse,true);this.tip=null;},toggleVis:function(id,vis){var el=document.getElementById(id);if(el)el.style.visibility=vis;},trackMouse:function(e){e=dw_event.DOMit(e);Tooltip.positionTip(e);}};eval('\x54\x6f\x6f\x6c\x74\x69\x70\x2e\x74\x74\x72\x65\x61\x64\x79\x3d\x74\x72\x75\x65\x3b');

function doTooltip(e, msg) {
  if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
  Tooltip.show(e, msg);
}

function hideTip() {
  if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
  Tooltip.hide();
}

onload=function(){
Tooltip.init();
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
document.links[i_tem].onmouseover=function(e){if (e)doTooltip(e, eval(this.id));else doTooltip(event, eval(this.id));}
document.links[i_tem].onmouseout=hideTip;
}
}

Thanks
Richard

[jscheuer1]

I was thinking it might be that. As far as I could determine, the script is only looking for the event's x and y coordinates in order to position the tip. The onload event (which is what would be passed if it were the event) has neither or they are null or 0. Also, I'm not real clear on which tip you want to activate. If it is an existing one that also gets activated onmouseover, we can probably figure out its x and y coordinates and simply pass those in an object. Or (since I'm not sure what to do about that right now) we could just make up our own coordinates like so:

var spoof = {};
spoof.pageX = 100; //spoofed x coordinate
spoof.pageY = 150; //spoofed y coordinate
doTooltip(spoof,'<img src=&quot;<%=Server.URLPathEncode(CStr(thumbnail))%>&quot; div class=&quot;tp2&quot;>name<div>');

Now, if this isn't on the page, it still won't work unless the server parses the server side tokens you are using. But if it is on the page, or the script file has the (I'm assuming that this is asp) .asp extension and is referenced that way in the external script tag, it will probably work out:

onload=function(){
Tooltip.init();
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
document.links[i_tem].onmouseover=function(e){if (e)doTooltip(e, eval(this.id));else doTooltip(event, eval(this.id));}
document.links[i_tem].onmouseout=hideTip;
}
var spoof = {};
spoof.pageX = 100; //spoofed x coordinate
spoof.pageY = 150; //spoofed y coordinate
doTooltip(spoof,'<img src=&quot;<%=Server.URLPathEncode(CStr(thumbnail))%>&quot; div class=&quot;tp2&quot;>name<div>');
}

This type of spoofing works best in FF and others that use the passed event (most commonly represented as (e)) model rather than in IE which uses the window.event model, but if the code is written to test for the standard method first or to pass the event directly (as appears to be the case here), it often will work in IE too. The " entities may need to be replaced with actual quotes ("). And there could be other problems. Try it how I wrote it first to see what happens.

[rich1234]

Dear John, Thanks, It worked a treat, I had to add the javascript into the body of the page as the asp includes couldnt find the image otherwise. It works fine. As you were saying about the x and y coordinates. Ideally I would like the tip to fire next to the link that also fires the tip. I added rough coordinates to get it close, but did you mean there is a way to anchor it to the link when you say "we can probably figure out its x and y coordinates and simply pass those in an object."
Thanks for your great help anyway.
Richard

[jscheuer1]

There are ways to find the top and left offset of an element. If we were to employ one of those and adjust for the offset width and height of the element, we could have a fair approximation of where to put the tip regardless of variations in how different browsers and/or screen resolutions positioned the 'trigger'. So lets say our 'trigger' has an id - 'tip1'. Put this function on your page (from quirksmode.com, I've used it before and it has worked):

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
}

Then in our code:

var trig = document.getElementById('tip1');
var spoof = {};
spoof.pageX = findPos(trig)[0] + trig.offsetWidth; //spoofed x coordinate
spoof.pageY = findPos(trig)[1] + trig.offsetHeight; //spoofed y coordinate
doTooltip(spoof,'<img src=&quot;<%=Server.URLPathEncode(CStr(thumbnail))%>&quot; div class=&quot;tp2&quot;>name<div>');

[rich1234]

Dear John, Thanks for that. I added the first code in the head, and the rest in the code. I found I was getting error messages. I added id="tip1" to the link that normally fires the link here, where I presume it should be.

<a onmouseover="doTooltip(event,'<img src=&quot;<%=Server.URLPathEncode(CStr(thumbnail))%>&quot; div class=&quot;tp2&quot;>name<div>' )" onmouseout="hideTip()"  id="tip1"  href="/link.asp?id=6" >link</a>

That stoped the link tooltip working, just got a tooltip with the link address showing in it and the onload tooltip didnt work either.
could it not be working because it has

if(!document.getElementById(this.tipID)){

in the var Tooltip function.
I am really happy with it working anyway so dont worry if you cannot see an obvious explanation. Thanks for your help.
Richard