PDA

View Full Version : Tool tip hides behind drop down boxes



rexall
08-20-2006, 09:59 AM
NS6+ IE5+ Opera 7+ Show Hint script
http://www.dynamicdrive.com/dynamicindex16/showhint.htm

Sun 20 Aug 06, 4:43 p.m.

Hi,

I'm an idiot! Please be nice!

I want to use a tool tip to provide instructions for users filling in a form. I have tested the Show Hint Script (and a few similar ones), and they all exhibit the following behavior: The tool tip that pops up displays on top of text boxes. Good! However, it displays BEHIND drop down boxes. Bad! :mad:

Is this normal? Is there a fix? Another script that doesn't do it?

Thanks for your help.

Aloha,

Rex

jscheuer1
08-20-2006, 08:14 PM
If your page is secure, you may need to come up with a secure blank page as the src for the iframe:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

</style>

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="hintboxiframe" src="" style="z-index:99;display:none;position:absolute;" frameborder="0"></iframe>
<![endif]-->
<![endif]-->

<script type="text/javascript">

/***********************************************
* Show Hint script- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* to overcome IE select element bug
***********************************************/

var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var ie5_5=typeof hintboxiframe=='undefined'? 0 : 1
var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

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

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
unhideIframe();
}
}

function hidetip(e){
hideIframe();
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("hintboxiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("hintboxiframe")
var theDiv = document.getElementById("hintbox");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><select name="bob"><option value="">pppppppppppp</option>
<option value="">ooooooooooooo</option>
<option value="">kkkkkkkkkkkkkk</option>
</select><br>
<b>Password:</b> *<input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><select name="bob"><option value="">pppppppppppp</option>
<option value="">ooooooooooooo</option>
<option value="">kkkkkkkkkkkkkk</option>
</select><br>
</form>
</body>
</html>

rexall
08-21-2006, 02:49 AM
Mon 21 Aug 06, 9:42 a.m.

Thanks a million, John! It works great! I had read somewhere that you could use an iFrame as a fix, but had no idea how to implement it.

The demo and documentation on the Show Hint script is misleading. The demo shows a form and describes using the script to explain fields to users. Just what I wanted! However, it doesn't say that it doesn't work with dropdown boxes! So--especially if you have a limited skill set as I do--you end up chasing your tail around and around in circles trying to figure out what the problem is.

Anyway, thanks again for the great fix and prompt reply. Much appreciated!

Aloha,

Rex

rexall
08-22-2006, 11:20 AM
Tue 22 Aug 06, 6:17 p.m.

Hi John,

Thanks again for the excellent script. It works great, but unfortunately the change scrollbar color style no longer works on the page. See below. Is there another way to do it?

Thanks for any info.

Aloha,

Rex

<STYLE>
<!--
body {
SCROLLBAR-ARROW-COLOR: #F5F5F5;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #333333;
}
-->
</STYLE>

rexall
08-22-2006, 11:43 AM
Never mind! It works if you put the style tag over <html> rather than between the <head> </head> . I tried inserting it in a dozen different places. Thought I had tried and eliminated putting it about <html> . Guess not. Anyway, it works like a champ now!

Aloha,

Rex

jscheuer1
08-22-2006, 05:53 PM
if you put the style tag over <html> rather than between the <head> </head>

That's invalid and may cause other problems. I'd try keeping it in the head section where it belongs but changing the selector:


<style type="text/css">

html {
scrollbar-arrow-color: #f5f5f5;
scrollbar-base-color: #000000;
scrollbar-track-color: #333333;
}

</style>

Notes: I've also cleaned up your syntax and choice of case to reflect current and the likely future conventions.

rexall
08-23-2006, 11:51 AM
Thanks, John. You guys are terrifically helpful. Your revised code works fine in <head> . I just got the original snippet of code from the internet. I don't know how to read it, just what it is supposed to do and how to paste it onto the page. Appreciate you looking out for us dummies! ;o}