Code:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" >
<title>Tooltip From Iframe</title>
<style type="text/css">
/*<![CDATA[*/
.atip {
position:fixed;z-Index:101;left:-3000px;top:-3000px; width:300px;background-Color: white; padding: 5px;border:solid red 1px;
}
.atip {
position:absolute;z-Index:101;left:-3000px;top:-3000px;margin-Left:0px;margin-Top:0px; width:300px;background-Color: white; padding: 5px;border:solid red 1px;
}
.mask {
z-Index:10;left:0px;top:0px;background-Color:#FFCC66;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body style="background: #006633">
<p><a class="PopUpID:sticky1 Mode:C OpenType:mouseover Anchor:center" href="http://en.wikipedia.org/wiki/Thailand" >Thailand</a></p>
<p><a class="PopUpID:sticky2 OpenType:mouseover" href="http://en.wikipedia.org/wiki/British_columbia">British Columbia</a></p>
<p><img id="s3" class="PopUpID:sticky3 Mode:? OpenType:mouseover"
src="http://img403.imageshack.us/img403/3403/redleaves.jpg" alt=""
></p>
<div id="sticky1" class="atip"
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" alt=""><br>
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>
<div id="sticky2" class="atip" >
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" style="position: relative; width: 300px" alt=""><br>BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>
<div id="sticky3" class="atip" >
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" style="position: relative; width: 300px" alt="">
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Class Name PopUp (09-November-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcClassPopUp={
Show:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
var e=window.event||arguments.callee.caller.arguments[0],xy=this.mse(e),s=o.s[0],w=s.offsetWidth,h=s.offsetHeight,p=o.a?this.pos(o.a):null,m=o.m==8?Math.floor(Math.random()*7):o.m,oh=o.obj.offsetHeight,y=p?p[1]+oh:null,ww=o.mk.offsetLeft,wh=o.mk.offsetTop;
this.o&&this.o!=o&&this.o.ud?this.Hide(this.o.i):null;
o.c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0],[0],[0,w,h,0]];
s.style.left=(o.a?o.mve?xy[0]:p[0]+w>ww-5?ww-w-5:p[0]<5?5:p[0]:(ww-w)/2)+'px';
s.style.top=(o.a?o.mve?xy[1]:p[1]+h>wh-5?p[1]-h-oh-2:p[1]+oh+2:(wh-h)/2)+'px';
if (!o.ud){
o.ud=true;
this.msk(o);
while (o.m==8&&m==o.lm){
m=Math.floor(Math.random()*7);
}
this.animate(o,o.s,m<7?o.c[m]:[0],m<7?o.c[8]:[100],m<7?4:1,new Date(),o.ms);
o.lm=m;
}
else if (!o.mve&&o.toggle!='false'&&o.a){
this.Hide(id);
}
this.o=o;
}
return false;
},
Hide:function(id){
var oop=this,o=this['zxc'+id];
o?o.to=setTimeout(function(){ o.ud=false; oop.animate(o,o.s,o.lm<7?o.c[8]:[100],o.lm<7?o.c[o.lm]:[0],o.lm<7?4:1,new Date(),o.ms/2,false) },o.h):null;
},
init:function(){
var e=document.body.getElementsByTagName('*'),mk=document.createElement('DIV'),c,o,i,z0=0,z1;
mk.style.position='fixed';
mk.style.right=mk.style.bottom='0px';
mk.style.width=mk.style.height='0px';
document.body.appendChild(mk);
for (;z0<e.length;z0++){
c=e[z0].className;
if (c.match('PopUpID:')){
o={obj:e[z0],mk:mk};
c=e[z0].className.split(' ');
for (z1=0;z1<c.length;z1++){
i=c[z1].indexOf(':');
if (i>2){
o[c[z1].slice(o,i).toLowerCase()]=c[z1].slice(i+1);
}
}
i=o.popupid;
c=document.getElementById(i);
if (c&&!this['zxc'+i]){
var m=o.mode,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',a=document.getElementById(o.anchor)||o.obj,mc=o.maskclass,ms=o.animate,h=o.hidedelay,t=o.opentype,t=t=='click'||t=='mousedown'||t=='mouseup'||t=='mouseover'?t:'mousemove',msk=document.createElement('DIV');
c.style.left=c.style.top='-3000px';
document.body.appendChild(c);
o.i=i;
o.m='CHVRLDUF?'.indexOf(m);
o.s=[c];
o.a=o.anchor!='center'?a:null;
o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
o.t=t;
o.mve=t=='mousemove'&&o.a;
o.h=isFinite(h*1)&&h>20?h*1:o.mve?1000:20;
o.ud=false;
msk.style.position='fixed';
c.style.left=msk.style.left='0px';
c.style.top=msk.style.top='-3000px';
msk.style.width='100%';
msk.style.height='0px';
msk.className=mc;
o.mc=mc;
o.msk=msk;
this['zxc'+i]=o;
this.addevt(o.obj,t,'Show',i);
o.mve?this.addevt(o.obj,'mouseout','Hide',i):null;
this.addevt(document,'click','click',o);
this.addevt(msk,'mouseup','Hide',i);
this.addevt(window,'resize','msk',o);
}
}
}
m=document.createElement('DIV');
m.style.position='fixed';
m.style.bottom=m.style.right='0px';
m.style.width=m.style.height='0px';
document.body.appendChild(m);
this.mk=m;
},
click:function(o,e){
var eo=e.target?e.target:e.srcElement,ud;
while (eo.parentNode){
if (eo==o.s[0]||eo==o.obj){
ud=true;
}
eo=eo.parentNode;
}
if (o.ud&&!ud){
this.Hide(o.i);
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
msk:function(o){
o.mc?document.body.appendChild(o.msk):null;
o.mc=null;
o.msk.style.top=(o.ud?0:-3000)+'px';
o.msk.style.height=(o.ud?this.mk.offsetTop:0)+'px';
},
animate:function(o,a,f,t,l,srt,mS,ud){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=[],z0=0;
for (;z0<l;z0++){
n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
n[z0]=isFinite(n[z0])?Math.floor(Math.max(n[z0],0)):f[z0];
}
l==1?oop.opac(a[0],n[0]):oop.clip(a[0],n);
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,l,srt,mS,ud); },10);
}
else {
l==1?oop.opac(a[0],t[0]):oop.clip(a[0],t);
if (ud===false){
oop.msk(o);
a[0].style.top='-3000px';
}
}
},
opac:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
clip:function(o,t){
o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
},
mse:function(e){
var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
},
addevt:function(o,t,f,p){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,e); }):null;
}
}
zxcClassPopUp.init();
/*
**** Class Name Options
Class Name options must be separated by a space(' ').
PopUpID:sticky3 // the unique ID name of the pop up DIV.
Mode:C //(optional) the display mode(see Note 1). (default = 'F' = fade)
Animate:1000 //(optional) the animation duration in milli seconds. (default = 1000)
OpenType:click //(optional) the event type to open the popup(see Note 2). (default = mousemove)
HideDelay:100 //(optional) the hide delay in milli seconds. (default = 1000)
Anchor:s3 //(optional) the unique ID name of the anchor element. (default = the featured element, center = center in the window)
MaskClass:mask //(optional) the class name of the 'mask'(see Note 3). (default = no mask)
Toggle:false //(optional) false = show/hide toggle is disabled. (default = toggle is enabled)
**** The Pop Up Position
If OpenType = mousemove the popup will follow the mouse position over the element offset by the CSS offsets of the popup and hide on mouseout
If OpenType = mouseover the popup will follow the mouse position over the element offset by the CSS offsets of the popup and hide on mouseout
If OpenType mousemove is not mousemove and the Anchor is not specifed as 'center' popup will position to the left and below the featured element.
and be hidden on toggle or if the pop up element is clicked.
If the Anchor is specifed as 'center' will centered in the window.
The popup may be close by clicking on the page out side the popup or featured element.
** Note 1.
The display modes are:
'C' = center clip,
'H' = horizontal clip,
'V' = vertical clip,
'R' = right clip,
'L' = left clip,
'D' = down clip,
'U' = up clip,
'F' = fade,
'?' = Random Clip
** Note 2.
The valid event types are:
mousemove, click, mouseover, mouseup or mousedown.
** Note 3.
Where the MaskClass is specified a 'mask' will cover the window.
The mask class CSS rule must specify a z-Index so the mask is over all page elements other than the pop up.
The script will assign a CSS position of fixed to the mask and control the size and positioning.
Clicking the mask will hide tht pop up.
*/
/*]]>*/
</script>
</body>
</html>
Make htmltooltip stay open on mouse over or mouse enter
Reply With Quote
Bookmarks