Simple Tool tip

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
MattMeisterAsked:
Who is Participating?
 
arantiusCommented:
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
 
ZvonkoSystems architectCommented:
Do you know overLib: http://www.bosrup.com/web/overlib/

0
 
ZvonkoSystems architectCommented:
By the way, overLib started also with simple onmouseover functionality and then added tables, images and so on...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MattMeisterAuthor Commented:
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
 
GwynforWebCommented:
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
 
MattMeisterAuthor Commented:
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
 
davidlars99Commented:
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
 
ZvonkoSystems architectCommented:
Gwynfor, why need you script to set a Title?
0
 
GwynforWebCommented:
because of line breaks
0
 
ZvonkoSystems architectCommented:
I assumed that :-)

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

0
 
GwynforWebCommented:
seems to work as well
0
 
GwynforWebCommented:
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
 
GwynforWebCommented:
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
 
GwynforWebCommented:
the above script is cross browser as well
0
 
MattMeisterAuthor Commented:
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
 
davidlars99Commented:
<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
 
davidlars99Commented:
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
 
MattMeisterAuthor Commented:
Thanks that works now (strange that you have to specify the pointer twice for Moz though) thanks.

Points being increased and split.
0
 
davidlars99Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.