select option,鼠标移到哪个选向就给出相应的提示该怎么做！

Question

<script language="JavaScript">
var oPopup = window.createPopup();
function showTips(str) {
var oPopBody = oPopup.document.body;
oPopBody.style.margin = "1px";
oPopBody.style.fontSize = "12px";
oPopBody.style.backgroundColor = "red";
oPopBody.style.border = "6px groove cyan";
oPopBody.innerHTML = '<span id=altBox>'+str+'</span>';var tempSpan=document.createElement('SPAN');
tempSpan.style.position='absolute';
tempSpan.innerText=str;
tempSpan.style.fontSize='12px';
document.body.insertAdjacentElement('beforeEnd',tempSpan);
if(tempSpan.offsetWidth>140)tempSpan.style.width='140px';
var w=tempSpan.offsetWidth+25;
var h=tempSpan.offsetHeight+14;
tempSpan.removeNode(true);oPopup.show(event.srcElement.offsetLeft+299, event.srcElement.offsetTop-h+75, w, h, document.body);
}
</script>
<center>
<select name="stationselect" onmouseover="showTips(this.options[this.selectedIndex].text)" onmouseout="oPopup.hide()" style="width:180;font-family:华文行楷;font-size:14px;">
      <option style="background-color:pink;font-family:华文彩云;color:blue;">欢迎，欢迎，欢迎，欢迎</option>
      <option style="background-color:cyan;font-family:隶书;color:green;">知往观来 </option>
      <option style="background-color:lime;font-family:华文行楷;color:red;">金翅擘海 </option>
      <option>心有所属 </option>
      <option>郴州风云 </option>
      <option>嘻嘻雀儿 </option>
      <option>深圳飞鹰 </option>
      <option>一地鸡毛 </option>

Answer 1

多谢clare2003(忘情火) ，我的意思不是说选中后，而是鼠标移到一个option后给出提示！另外请问上面几位模拟怎么做？

Answer 2

<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><script type="text/javascript">

var horizontal_offset="9px" //horizontal offset of hint box from anchor link/////No further editting neededvar vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.allfunction 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=document.all.sel1.options[document.all.sel1.selectedIndex].text
//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
}
}function hidetip(e){
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</script>
<form ID=Form1>
<b>Username:</b> <input type="text" class="test" ID=Text1/><a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br />
<b>Password:</b>  <input type="text" class="test" ID=Text2/> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br />
<select id="sel1" onMouseover="showhint('dddd', this, event, '200px')">
<option>sssssssss</option>
<option>bbbbbbb</option>
</select>
</form>

Answer 3

非常感谢clare2003(忘情火) ,可能我描述的还是不够清晰。你给我的例子都是选中后给出提示，
我希望的是鼠标在下拉的 select 信息上移动时，每移到相应的 option 就给出对应的提示信息！

Answer 4

<style type="text/css">#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px 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);
}#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}</style>
<script type="text/javascript">
var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltipvar offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer imagevar 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") : ""var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}function ddrivetip(thetext, thewidth, thecolor){
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 nondefaultpos=false
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 winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorYvar leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-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=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
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+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
function fSelhit()
{
 var hitinfo=document.all.Sel.options[document.all.Sel.selectedIndex].text ;
 if (ns6||ie)
 {
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=hitinfo
enabletip=true
return false
}
 
}document.onmousemove=positiontip</script>
<select id=Sel onmouseover="fSelhit()" onMouseout="hideddrivetip()">
<option>saaaaaaaaa</option>
<option>bbbbbb</option>
<option>ddddd</option></select>
<div onMouseover="ddrivetip('Yahoo\'s Site', 250)";
 onMouseout="hideddrivetip()">This is a DIV. This is a DIV.</div>