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

Thread: simple tooltip

  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Location
    LA, California
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    simple tooltip

    Hi,

    Im learning javascript a bit from the net and am wondering if someone would be kind enough to help me with a problem. i need a tooltip type script, that is very short and to the point. probably like one or two functions to show and one to remove. no fancy things at all.

    Thanks.
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    There are 3 kinds of ppl those who can count and those who cant
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Script-Megafest.com Coming Oh so very soon

  • #2
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    Hi Al_90.

    This might sounds a bit like a joke...but the easiest way to create a tooltip is to create a link and define a title for that link....

    <a href="/homepage.html" title="Please click here to go to the home page.">Home</a>

    Basically...when you specify a title for a given link...a tooltip would automatically be displayed once you mouse hover over the link.

    Now...that is the simplest way to create a ToolTip....without needing to use JavaScript.

    If you want to use JavaScript..here is an example of a ToolTip Script that I have written over 3 years ago. first...the css..

    <style type = "text/css">
    #tips {
    display: none;
    position: absolute;
    border: 1px solid black;
    background-color: lightyellow;
    width: 200px;
    }
    </style>

    Than the JS script itself.

    <script type = "text/javascript">
    function showTip( tip, e ) {
    var x = 0;
    var y = 0;
    if ( document.all ) {
    x = event.clientX;
    y = event.clientY;

    } else {
    x = e.pageX;
    y = e.pageY;
    }
    var element = document.getElementById( 'tips' );
    element.style.display = "block";
    element.style.left = x + 12;
    element.style.top = y + 10;
    element.innerHTML = tip;
    }
    function hideTip() {
    document.getElementById( 'tips' ).style.display = "none";
    }


    Here is a link example...

    <a href = "http://google.com" onMouseover = "showTip( 'If you click here...you would be taken to google.com', event );" onmouseout="javascript: hideTip();">google.com</a>

    This script is very old...but does the trick that you are after. I have re-written the above script more than 5 times...(sorry...I am now working for a company...and whatever I write...is legally owned by them...so you are seeing the old school stuff here).

    I would really appreciate it if you would kindly contact me and let me know what improvements you have added to the script.

    thanks and good luck.
    ess

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Location
    LA, California
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    haha ok,

    heres your script im using right now

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

    <
    html>



        <
    head>

         <
    title>test</title>

          <
    style type="text/css">

          <!--

          
    body {

             
    background-color#CACACA;

          
    }



          
    #tips {

          
    displaynone;

          
    positionabsolute;

          
    border1px solid black;

          
    background-colorlightyellow;

          
    width200px;

          }

          -->

          </
    style>



          <
    script type="text/javascript">

          <!--

          function 
    showTiptip) {

          var 
    0;

          var 
    0;

          if ( 
    document.all ) {

          
    event.clientX;

          
    event.clientY;



          } else {

          
    e.pageX;

          
    e.pageY;

          }

          var 
    element document.getElementById'tips' );

          
    element.style.display "block";

          
    element.style.left 12;

          
    element.style.top 10;

          
    element.innerHTML tip;

          }



          function 
    hideTip() {

          
    document.getElementById'tips' ).style.display "none";

          }

          
    // -->

          
    </script>

        </head>



        <body>

            <a href="http://google.com" onMouseover="showTip('If you click here...you would be taken to google.com', event );" onmouseout="hideTip();">google.com</a>

        </body>

    </html> 
    but theres an error somewhere. and me not knowing javascript that will isn't helping. also will this tooltip turn out a bit like overlib? thanks so much for everything so far
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    There are 3 kinds of ppl those who can count and those who cant
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Script-Megafest.com Coming Oh so very soon

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    LA, California
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry for the double post, but iv found a script that does basicly everything i want but it can't free move over the test like on overlib. it stays in one spot. any help. also is there an way to clean it up a bit it kinda looks like theres unneeded variables. thaks

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <
    html>

        <
    head>
            <
    title>test</title>
    <
    SCRIPT LANGUAGE="JavaScript">
    <!--

        var 
    last_layer 0;
        var 
    xy;
        var 
    ns4=document.layers;
        var 
    ns6=document.getElementById&&!document.all;
        var 
    ie4=document.all;
        var 
    uanavigator.userAgent;
        var 
    MAC= (navigator.platform.indexOf("PPC") > 0);
        var 
    IE5MAC_IE5MAC_SAFARISAFARI;

        
    IE5 = (ua.indexOf("MSIE 5") > || ua.indexOf("MSIE 6") > 0);
        
    MAC_IE5 = (MAC && IE5);
        
    SAFARI = (ua.indexOf("Safari") > 0);
        
    MAC_SAFARI = (MAC && SAFARI);

        function 
    GetObject(name)
        {
            if (
    document.getElementById)
            {
                return 
    document.getElementById(name);
            } else
            if (
    document.all)
            {
                return 
    document.all[name];
            } else
            if (
    document.layers)
            {
                return 
    document.layers[name];
            }
        }

        function 
    GetOurMouse(e)
        {
            
    e.pageX;
            
    e.pageY;
        }

        function 
    ShowDetails(user_namescorefilesizeratingwhich)
        {
            if(!
    MAC_IE5)
            {
                var 
    our_style GetObject(which);
                
    our_style.style.display "block";

                if(
    last_layer != 0)
                {
                    
    RemoveDetails(last_layer);
                    
    last_layer 0;
                }

                
    last_layer which;

                if(
    ie4)
                {
                    eval(
    "document.all." which ".style.left = " + (event.x-60+document.body.scrollLeft) + ";");
                    eval(
    "document.all." which ".style.top = " + (event.y+20+document.body.scrollTop) + ";");
                } else
                if(
    ns4||ns6||MAC_SAFARI)
                {
                    
    document.onmousemove GetOurMouse;
                    
    our_style.style.left = (x-60);
                    
    our_style.style.top = (y+20);
                }

                var 
    content '<table border="0" cellpadding="0" cellspacing="0" width="150"><tr><td bgcolor="#000000" width="100%" align="center"><table border="0" cellpadding="1" cellspacing="2" width="100%"><tr><td align="center"><font color="#C2C7CB">by</font> <font color="#FF9900"><b>' user_name '</b></font></td></tr><tr><td align="center"><font color="#C2C7CB">Current Score:</font> <b><font color="#FFCC00">' score '</font></b><br><font color="#C2C7CB">Size:</font> <b><font color="#FFCC00">' filesize '</font></b><br><font color="#C2C7CB">Rating:</font> <font color="#D94935"><b>' rating '</b></font></td></tr></table></td></tr></table>';

                if(
    ns4){our_style.document.write(content);our_style.document.close();our_style.visibility="visible"}
                if(
    ns6){document.getElementById(which).innerHTMLcontentour_style.display=''}
                if(
    ie4){document.all(which).innerHTML=content;}
            }
        }

        function 
    RemoveDetails(which)
        {
            var 
    our_style GetObject(which);

            if(
    ns4){document.which.visibility="hidden";}
            else if (
    ns6||ie4)
            
    our_style.style.display="none";
            
    last_layer 0;
        }

    //-->
    </SCRIPT>
        </head>
        <body>
    <a href="#" onMouseover="ShowDetails('test', '3/10', '5kb', 'PG', '1');" onMouseout="RemoveDetails('1');">text</a>
        </body>

    </html> 
    Last edited by Al_90; 11-12-2006 at 03:14 PM.
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    There are 3 kinds of ppl those who can count and those who cant
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Script-Megafest.com Coming Oh so very soon

  • #5
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    Right...this is the first time I hear of overlib...had a look...looks well written and well formed. Perhaps you should consider using it.

    As for the reason the script I gave didn't work...well, I forgot to mention that you should include a div in your page...and give "tips" id.

    <div id="tips">&nbsp;</div>

    that should get it working nicely.

    Good luck
    ess


  •  

    Posting Permissions

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