PDA

View Full Version : trigger javascript tooltip with tab



rich1234
09-04-2007, 08:39 PM
Hi there, Looking at website accessibility standards, does anyone know if a mouseover javascript tooltip can be triggered by the tab button too. I cannot get mine too and wonder if there is a solution to satisfy accessibility issues?
I have found how to do it with onfocus, but using the tab the tooltips position now follows the cursors position and does not stay next to the link. Is there a solution to this?
Thanks
Richard

rich1234
10-20-2007, 04:24 PM
Hi, Catching up on this post, I was just wondering if this is the bit that could be modified so that onfocus the tip stays with the link and doesnt follow the mouse.



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\x 69\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;
}
}

Any help would be greatly appreciated.
Thanks
Richard