dcayce
asked on
Tool-Tip Pop-Up won't show in IE 8
I found a tool-tip kind of pop-up that I like but can't get it to show in IE 8. Works fine in Safari & FireFox, but IE won't recognize it. The cursor changes to show an href, but no action follows.
I've stripped the page of everything except the necessary code, and included it here. It can be seen in action (or, non-action, as the case may be) at this link:
http://www.cayceweb.com/Pop-Up.html
If there is a better alternative than this particular pop-up, I'd be open to that, but I like this one.
Thanks.
Cayce
I've stripped the page of everything except the necessary code, and included it here. It can be seen in action (or, non-action, as the case may be) at this link:
http://www.cayceweb.com/Pop-Up.html
If there is a better alternative than this particular pop-up, I'd be open to that, but I like this one.
Thanks.
Cayce
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
#search_tip{
position: absolute;
width: auto;
border: 1px solid black;
padding: 6px 8px 3px 8px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
font-family: sans-serif;
font-size:11px;
color:#004400;
text-align:center;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
-->
</style>
</head>
<body>
<div id="search_tip"></div>
<script type="text/javascript">
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=-30 //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("search_tip") : ""
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.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+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>
<br><br><br>
<a href="#" target="_blank" onMouseover="ddrivetip('Will Not Show in IE 8','white')"; onMouseout="hideddrivetip()" style="text-decoration: none; cursor:hand;"><p class="handout_R">HOVER HERE</p></a>
</body>
</html>
In IE7, it doesn't display either, but I get an error saying tipobj.style is null or not an object.
If you uncomment your css style, and rename it to dhtmltooltip, something displays, but it is ugly. Try that and get back to me.
Actually - scratch that last post, I used this code to get it to work on FF and IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#search_tip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: blue;
visibility: hidden;
z-index:1 ;
/*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>
</head>
<body>
<div id="search_tip"></div>
<script type="text/javascript">
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=-30 //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["search_tip"] : document.getElementById? document.getElementById("search_tip") : ""
}
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.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+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>
<br><br><br>
<a href="#" target="_blank" onMouseover="ddrivetip('Will Not Show in IE 8','white')"; onMouseout="hideddrivetip()" style="text-decoration: none; cursor:hand;"><p class="handout_R">HOVER HERE</p></a>
</body>
</html>
ASKER
Protuhj:
What did you change to make that happen?
What did you change to make that happen?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hmmmm... interesting... I'll have to study that to learn from this experience.
Seems to work, though, so thanks for that help. I'll close the question after this.
Thanks again!
Cayce
Seems to work, though, so thanks for that help. I'll close the question after this.
Thanks again!
Cayce
ASKER
Great help!