This has been discussed in the forums, but I have a couple new twists at the end. I will start with exactly what I am trying to do, and then give details. In short, I need to add a ToolTip to a DropDown List on my web page.
Now, after looking through dozens of sites, I know that:
a) DropDown Lists themselves do not have tooltips; "Title" will not work.
b) Using an A Element will not work as well.
So, I have started dabbling with JavaScript and creating my own ToolTip
(I've hidden some details):
<select id="MyList" onmouseover='javascript: ShowToolTip("X")'
onmouseout='javascript: HideToolTip()>
<option value="0">Off</option>
<option value="1">Low</option>
<option value="2">Med.</option>
<option value="3">High</option>
</select>
<div id="DHTMLToolTip"></div>
function ShowToolTip(ToolTipText) {
var MyToolTip=document.all["DHTMLToolTip"];
MyToolTip.innerHTML=ToolTipText;
var curX=event.clientX;
var curY=event.clientY;
var offsetX=-60;
var offsetY=20;
MyToolTip.style.left=(curX+offsetX) + "px";
MyToolTip.style.top=(curY+offsetY) + "px";
MyToolTip.style.visibility="visible";
return true;
}
function HideToolTip() {
var MyToolTip=document.all["DHTMLToolTip"];
MyToolTip.style.visibility="hidden"
return true;
}
There are two major problems:
1) The page containing this code is in a short frame (acting like a toolbar). As a result, the custom tooltip usually appears below the bottom border, making it unseen. In comparison, regular tooltips appear above everything, including the frame below.
2) The dropdown list always seems to appear above the custom tooltip.
Thus, this solution does not seem to be the way to go.
Does anyone know the solution to this?
Also, while I am talking about tooltips, where can I find the default settings for tooltips?
Now, after looking through dozens of sites, I know that:
a) DropDown Lists themselves do not have tooltips; "Title" will not work.
b) Using an A Element will not work as well.
So, I have started dabbling with JavaScript and creating my own ToolTip
(I've hidden some details):
<select id="MyList" onmouseover='javascript: ShowToolTip("X")'
onmouseout='javascript: HideToolTip()>
<option value="0">Off</option>
<option value="1">Low</option>
<option value="2">Med.</option>
<option value="3">High</option>
</select>
<div id="DHTMLToolTip"></div>
function ShowToolTip(ToolTipText) {
var MyToolTip=document.all["DHTMLToolTip"];
MyToolTip.innerHTML=ToolTipText;
var curX=event.clientX;
var curY=event.clientY;
var offsetX=-60;
var offsetY=20;
MyToolTip.style.left=(curX+offsetX) + "px";
MyToolTip.style.top=(curY+offsetY) + "px";
MyToolTip.style.visibility="visible";
return true;
}
function HideToolTip() {
var MyToolTip=document.all["DHTMLToolTip"];
MyToolTip.style.visibility="hidden"
return true;
}
There are two major problems:
1) The page containing this code is in a short frame (acting like a toolbar). As a result, the custom tooltip usually appears below the bottom border, making it unseen. In comparison, regular tooltips appear above everything, including the frame below.
2) The dropdown list always seems to appear above the custom tooltip.
Thus, this solution does not seem to be the way to go.
Does anyone know the solution to this?
Also, while I am talking about tooltips, where can I find the default settings for tooltips?