Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    84
    Thanks
    47
    Thanked 0 Times in 0 Posts

    Tool Tips Code Help

    Hello,

    Not too sure on what to do here. I don't know much of anything about java. I downloaded a tool tips script to implement on my site.

    This is how it is embedded in the site...

    <span class="hotspot" onmouseover="tooltip.show('this is what will display in tool tips')" onmouseout="tooltip.hide();">test</span>

    What I want to do is create a separate file (or maybe just include in the same file) a list of the terms I want and their definitions. For example, I would list...

    Term 1 = The definition for terms 1
    Term 2 = The definition for terms 2
    Term 3 = The definition for terms 3
    etc.....

    I like to be organized this way as the terms I want the tool tips to be used for will have lengthly explanations and used quite often, so it would be nice to just call on them in the code instead of repeating the full definition throughout the site. My problem is anything I put between the 's after tooltip.show( displays. How would I call on variables inside the 's?
    here is the entire script....Thanks!

    var tooltip=function(){
    var id = 'tt';
    var top = 3;
    var left = 3;
    var maxw = 300;
    var speed = 10;
    var timer = 20;
    var endalpha = 95;
    var alpha = 0;
    var tt,t,c,b,h;
    var ie = document.all ? true : false;
    return{
    show:function(v,w){
    if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
    }
    tt.style.display = 'block';
    c.innerHTML = v;
    tt.style.width = w ? w + 'px' : 'auto';
    if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
    }
    if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
    h = parseInt(tt.offsetHeight) + top;
    clearInterval(tt.timer);
    tt.timer = setInterval(function(){tooltip.fade(1)},timer);
    },
    pos:function(e){
    var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
    var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
    tt.style.top = (u - h) + 'px';
    tt.style.left = (l + left) + 'px';
    },
    fade:function(d){
    var a = alpha;
    if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
    if(endalpha - a < speed && d == 1){
    i = endalpha - a;
    }else if(alpha < speed && d == -1){
    i = a;
    }
    alpha = a + (i * d);
    tt.style.opacity = alpha * .01;
    tt.style.filter = 'alpha(opacity=' + alpha + ')';
    }else{
    clearInterval(tt.timer);
    if(d == -1){tt.style.display = 'none'}
    }
    },
    hide:function(){
    clearInterval(tt.timer);
    tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
    }
    };
    }();

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb How close is this ...

    You didn't include the entire script because I'm just guessing as to what the
    hotspot class is defined to be doing. I put in a guess, but will probably need
    to be replaced with the correct actions.

    The 'Terms' array could be longer and referenced as an external JS file.
    Notice the first element is blank for a reason ... so you could reference
    the correct display with the numbering system that you started with.
    Most arrays are zero based rather than starting at element one.

    Note also, this is the Javascript forum and not the Java forum.
    None of the code you provided was java.

    How close is this to what you want to do?
    Code:
    <html>
    <head>
    <title>Tooltips</title>
    <style type="text/css">
    .hotspot { 
    	background-color:yellow; 
    	color:blue; 
    	font-weight:bold; 
    }
    </style>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=166372
    
    var tooltip=function(){
     var id = 'tt';
     var top = 3;
     var left = 3;
     var maxw = 300;
     var speed = 10;
     var timer = 20;
     var endalpha = 95;
     var alpha = 0;
     var tt,t,c,b,h;
     var ie = document.all ? true : false;
     return{
      show:function(v,w){
       if(tt == null){
        tt = document.createElement('div');
        tt.setAttribute('id',id);
        t = document.createElement('div');
        t.setAttribute('id',id + 'top');
        c = document.createElement('div');
        c.setAttribute('id',id + 'cont');
        b = document.createElement('div');
        b.setAttribute('id',id + 'bot');
        tt.appendChild(t);
        tt.appendChild(c);
        tt.appendChild(b);
        document.body.appendChild(tt);
        tt.style.opacity = 0;
        tt.style.filter = 'alpha(opacity=0)';
        document.onmousemove = this.pos;
       }
       tt.style.display = 'block';
       c.innerHTML = v;
       tt.style.width = w ? w + 'px' : 'auto';
       if(!w && ie){
        t.style.display = 'none';
        b.style.display = 'none';
        tt.style.width = tt.offsetWidth;
        t.style.display = 'block';
        b.style.display = 'block';
       }
       if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
       h = parseInt(tt.offsetHeight) + top;
       clearInterval(tt.timer);
       tt.timer = setInterval(function(){tooltip.fade(1)},timer);
      },
      pos:function(e){
       var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
       var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
       tt.style.top = (u - h) + 'px';
       tt.style.left = (l + left) + 'px';
      },
      fade:function(d){
       var a = alpha;
       if((a != endalpha && d == 1) || (a != 0 && d == -1)){
        var i = speed;
        if(endalpha - a < speed && d == 1){
         i = endalpha - a;
        }else if(alpha < speed && d == -1){
         i = a;
        }
        alpha = a + (i * d);
        tt.style.opacity = alpha * .01;
        tt.style.filter = 'alpha(opacity=' + alpha + ')';
       }else{
        clearInterval(tt.timer);
        if(d == -1){tt.style.display = 'none'}
       }
      },
      hide:function(){
       clearInterval(tt.timer);
       tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
      }
     };
    }(); 
    </script>
    
    <script type="text/javascript">
    // following could be in an external JS file
    var Terms = ['',
      'Term 1 = The definition for terms 1',
      'Term 2 = The definition for terms 2',
      'Term 3 = The definition for terms 3'
    ];
    
    </script>
    </head>
    <body>
    Some information with a 
    <span class="hotspot"
     onmouseover="tooltip.show('this is what will display in tool tips')" 
     onmouseout="tooltip.hide();">test</span>
    ... followed by more information ...
    <span class="hotspot" onmouseover="tooltip.show(Terms[1])" onmouseout="tooltip.hide();">Term 1</span><br>
    ... followed by even more information ...
    <span class="hotspot" onmouseover="tooltip.show(Terms[2])" onmouseout="tooltip.hide();">Term 2</span>
    ... followed by even lots' more information ...
    <span class="hotspot" onmouseover="tooltip.show(Terms[3])" onmouseout="tooltip.hide();">Term 3</span>
    ... until done.
    </body>
    </html>
    Also, remember to put you code between [ code] and [ /code] (without the spaces) tags to make it easier to read on the forum.

  • Users who have thanked jmrker for this post:

    jdblewitt (05-15-2009)

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    84
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Thanks, sorry for the mistakes. You got the idea.

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    84
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Thanks so much, that works great!

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts
    You're most welcome.
    Glad I could help.

    Now, how about putting up the CSS so that other could use it as well?

    Good Luck!


  •  

    Posting Permissions

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