Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Simple Tool tip

Posted on 2004-10-26
20
Medium Priority
?
904 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
Comment
Question by:MattMeister
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
  • +2
20 Comments
 
LVL 63

Expert Comment

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

0
 
LVL 63

Expert Comment

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

Author Comment

by:MattMeister
ID: 12411180
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12411181
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:
arantius earned 1000 total points
ID: 12411404
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
ID: 12412243
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
ID: 12412275
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
ID: 12412562
Gwynfor, why need you script to set a Title?
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12413056
because of line breaks
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12413138
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
ID: 12413175
seems to work as well
0
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 200 total points
ID: 12413238
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
ID: 12413407
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
ID: 12413496
the above script is cross browser as well
0
 

Author Comment

by:MattMeister
ID: 12422644
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
davidlars99 earned 400 total points
ID: 12422888
<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
ID: 12422914
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
ID: 12422952
0
 

Author Comment

by:MattMeister
ID: 12423379
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
ID: 12424947
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

636 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