Solved

Simple Tool tip

Posted on 2004-10-26
848 Views
Last Modified: 2008-06-22
I have looked on the net for some sample code to do this but every example comprises of a lot of code, i just want a simple tool tip.

User puts mouse over text, a DIV appears with several lines of text. User moves mouse from text, DIV is hidden again.

Does anyone have any simple code to do this... or failing that can anyone tell me the functions il need so i can try to figure it out myself.

Thank you
0
Question by:MattMeister
    20 Comments
     
    LVL 63

    Expert Comment

    by:Zvonko
    Do you know overLib: http://www.bosrup.com/web/overlib/

    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    By the way, overLib started also with simple onmouseover functionality and then added tables, images and so on...
    0
     

    Author Comment

    by:MattMeister
    Hi Zvonko

    overlib is very nice in functionality but its a little OTT for what i need.

    The tooltips will only be used on one page and its a very simple page at that. I was really hoping a simple tool tip would be possible just with something nearer a few lines of code.
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    Here is  a very simple idea

    This is an example of tooltip <span onmouseover="this.title='Hello this is an example\na few lines of the text'">mouseover me</span> This is some more text.

    0
     
    LVL 18

    Accepted Solution

    by:
    Based on some old code, but this should point you in the right direction:


    <html>
    <head>
    <style>
    .popup {
          border: 2px solid black;
          background-color: #F9F9C5;
          width: 350px;
          padding: 3px;
          position: absolute;
          display: none;
    }
    </style>

    <script type="text/javascript">
    var popup, xOffset, yOffset;
    //detect browser
    var ns=document.getElementById&&!document.all;
    var ie=document.all;

    document.onmousemove=get_mouse;
    xOffset=5, yOffset=10;

    function get_mouse(e) {
          popup=document.getElementById("notesPopup");
          var x=(ns)?(e.pageX):(event.x+document.body.scrollLeft);
          popup.style.left=x+xOffset;
          var y=(ns)?(e.pageY):(event.y+document.body.scrollTop);
          popup.style.top=y+yOffset;
    }

    //these function will display/hide the popup when the song name is moused over
    function showPopup(msg) {
          popup.innerHTML=msg;
          popup.style.display="block";
    }
    function hidePopup() {
          popup.style.display="none";
    }

    </script>
    </head>
    <body>

    <div style="display: none;" class="popup" id="notesPopup"></div>

    <span onmouseover="javascript:showPopup('This is my tooltip.');" onmouseout="javascript:hidePopup();">This text displays a tooltip</span><br />
    This does not<br />
    <span onmouseover="javascript:showPopup('This is my other tooltip.');" onmouseout="javascript:hidePopup();">This text displays a tooltip</span><br />
    </body>
    </html>
    0
     

    Author Comment

    by:MattMeister
    GwynforWeb, can you customize the appearence of a span using CSS? if so that would be a useful simple solution

    arantius, Thanks thats more in the lines of what i am looking for, i will have a play with it.
    0
     
    LVL 13

    Expert Comment

    by:davidlars99
    this script is not cross browser right now, but it will be if you want   :)

    <html>
    <head>
    <script Language="Javascript">

    var tipOn=false;
    var ocount=5;
    var tmr=null;
    var wait=null;
    var speed=35;
    var ie=(navigator.userAgent.toLowerCase().indexOf("msie")!=-1?true:false);
    function gen(txt) {
        clearTimeout(tmr);
        clearTimeout(wait);
        if(tipOn&&ie){
           txtOb.innerHTML=txt;
           divOb.style.width="160px";
           fader();
        }else if(!tipOn&&ie){
           clearTimeout(tmr);
           divOb.style.left="-2000px";
           ocount=5;
        }
    }
    function fader(){
        clearTimeout(tmr);
        if(ocount==85){ocount=5;
            //wait=setTimeout("waiter()",6000);
            return
        }
        divOb.style.filter="alpha(opacity="+ocount+")";
        ocount+=5;
        tmr=setTimeout("fader()",speed)
    }
    function micemove(evnt){
       if(!ie)
           return
       var pT=event.clientY+divOb.offsetHeight,
           pL=event.clientX-divOb.offsetWidth;

       if(tipOn){
           if((document.body.offsetWidth-event.clientX)<((divOb.offsetWidth*2)-125)){
               pL=event.clientX-divOb.offsetWidth;
               divOb.style.pixelLeft=pL+4+document.body.scrollLeft;
           }else{
               divOb.style.pixelLeft=event.clientX+document.body.scrollLeft;
           }
           if((document.body.offsetHeight-event.clientY)<((divOb.offsetHeight*2)-12)){
               pT=event.clientY-divOb.offsetHeight-5;
               divOb.style.pixelTop=pT+document.body.scrollTop;
           }else{
               pT=event.clientY+3;
               divOb.style.pixelTop=pT+15+document.body.scrollTop;
           }
       }
    }
    function waiter(){
        divOb.style.left="-2000px";
        clearTimeout(tmr);
        clearTimeout(wait);
    }

    </script>
    </head>
    <body>
    <a href="www.experts-exchange.com" onmousemove=micemove() onmouseover="tipOn=true;gen('simple mouse over\n')" onmouseout="tipOn=false;gen()">Experts Exchange</a>


    <div id="divOb" style="POSITION: absolute; BORDER:0px; Z-INDEX: 999999; LEFT: -2000px; TOP: -2000px; WIDTH: 24px; background-color:#222222; padding:10px">
    <div id="txtOb" style="font-family:verdana;font-size:11px;color:#ffffff">&nbsp;</div>
    </div>

    </body>
    </html>
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    Gwynfor, why need you script to set a Title?
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    because of line breaks
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    I assumed that :-)

    How about this:
    <span title='Hello this is an example&#10;a few lines of the text'>mouseover me</span>

    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    seems to work as well
    0
     
    LVL 31

    Assisted Solution

    by:GwynforWeb
    MattMeister, here is one from dynamic drive that I often use, it deals with the edges nicely

    <html>

    <head>
    <style type="text/css">

    #dhtmltooltip{
    position: absolute;
    width: 150px;
    border: 2px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }

    </style>
    <title></title>
    </head>

    <body>
    <div id="dhtmltooltip"></div><script type="text/javascript">

    /***********************************************
    * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }

    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetxpoint+"px"

    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight)
    tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    else
    tipobj.style.top=curY+offsetypoint+"px"
    tipobj.style.visibility="visible"
    }
    }

    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }

    document.onmousemove=positiontip

    </script>
    <a
    href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')" ;
    onMouseout="hideddrivetip()">

    <p>Search Engine</a> </p>
    <a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)" ;
    onMouseout="hideddrivetip()">

    <p>Yahoo</a> </p>
    <div onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')" ;
    onMouseout="hideddrivetip()" style="position:absolute;top:0px;left:850px;">

    <p>Some text here. Some text here.</p>
    </div>
    </body>
    </html>
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    in the above use a span for text within an unbroken line, eg

    This text does not have a tool tip<span onMouseover="ddrivetip('This text has a tip!', '#EFEFEF')" ;
    onMouseout="hideddrivetip()" > TEXT </span>,this text does not have a tool tip
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    the above script is cross browser as well
    0
     

    Author Comment

    by:MattMeister
    Thanks to all, i have mainly based what i am using around arantius solution which operates very well with minimal code.

    I have one last thing i need it to do though, and i can't get it working. On the DIV which i mouseover to show the tool tip i would like the cursor to change to the hand but it doesn't want to work, i have tried with:

    <div style="cursor: uri;">some text</div>

    If someone can help me with that i will happily increase the points, thank you!!
    0
     
    LVL 13

    Assisted Solution

    by:davidlars99
    <div style="cursor: pointer; cursor: hand;">some text</div>

    I suggest you use it this way and do not reverse these values, leave then in this order at all times if you want it to be cross browser

    0
     
    LVL 13

    Expert Comment

    by:davidlars99
    The possible values for the cursor are

    hand                      (IE)
    pointer                   (N)
    auto                       (N6)
    crosshair
    default                    (arrow)
    move
    n|ne|e|se|s|sw|w|nw-resize
    text (I-bar)              (N6)
    wait (hour glass)      (N6)
    help                        (arrow with"?")

     


    0
     
    LVL 13

    Expert Comment

    by:davidlars99
    0
     

    Author Comment

    by:MattMeister
    Thanks that works now (strange that you have to specify the pointer twice for Moz though) thanks.

    Points being increased and split.
    0
     
    LVL 13

    Expert Comment

    by:davidlars99
    The style "cursor: pointer" works in Mozilla and Netscape 6+, IE6/Win, and IE5.x/Mac, but not IE5.x/Win where the "cursor: pointer" must be used. IE6/Win and IE5.x/Mac accept both the "pointer" and "hand"! That's why you have to use "cursor: pointer; cursor: hand;". Do not reverse those two values! Written this way, NS6+ will see the first value and ignore the second, so you get pointer. In IE5.x/Win, it sees both and uses the second, so you get hand. If you reverse the values, then Netscape 6+ will be okay, but IE5.x/Win will see both and try to use the second. That won't get you the little hand-pointer icon in IE5.x/Win.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    The Complete Ruby on Rails Developer Course

    Ruby on Rails is one of the most popular web development frameworks, and a useful tool used by both startups and more established companies to build strong graphic user interfaces, and responsive websites and apps.

    Suggested Solutions

    Article by: DanRollins
    This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    884 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now