Results 1 to 3 of 3

Thread: Make htmltooltip stay open on mouse over or mouse enter

  1. #1
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Make htmltooltip stay open on mouse over or mouse enter

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Replies: 2
    Last Post: 10-31-2012, 07:55 AM
  2. Replies: 1
    Last Post: 06-12-2012, 08:31 PM
  3. To change from mouse-click to mouse-hover on SlashDot menu script *please*
    By kevinhannan in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-28-2010, 09:22 PM
  4. Replies: 2
    Last Post: 05-22-2009, 01:58 AM
  5. stay mouse over style when go to submenu (SuckerTree Vertical Menu)
    By wedge in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-25-2008, 05:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •