PDA

View Full Version : Make htmltooltip stay open on mouse over or mouse enter



iamjoedy
11-09-2013, 07:53 AM
I'm really new to JavaScript, just started playing with it a few weeks ago.

I used htmltooltip.js on a project and love the simplicity of it.

What code needs to be added to the page or the script to make the tooltip stay open when the mouse enters the tooltip, or keeps it open until the user clicks elsewhere on the page?

I've seen other more powerful tooltip scripts that have those feature, but, because I'm so new to using JavaScript, most of them are too advanced for me to setup and use at this time. (I'm still working on my first "Hello world!" script.)

I've hunted around the internet and haven't seen anything to make the tooltips stay open that I can code.

I've seen stuff about setting up a child/parent relationship with the calling element, but I don't know how to do that.

Can anyone help me work this out?

Thanks.

jscheuer1
11-09-2013, 12:14 PM
Warning: Please include a link to the DD script(s) in question in your post. See this post (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

vwphillips
11-09-2013, 02:32 PM
I think that's a javascript Kit script

this uses a class name to define the options
and while more complex with more options is as easy to apply


<!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>