让DropDownlist显示ToolTip(两部分)
首先:Items显示title代码:
window.onload = showdropitem;
function showdropitem()
{
var el = document.getElementsByTagName("select");
for(i=0;i<el.length;i++)
{
for(j=0;j<el[i].options.length;j++)
{
el[i].options[j].title = el[i].options[j].text;
}
}
}
页面内所有的dropdownlist控件都可以实现tooltip(html里面为title)效果
其次:选定项显示Title的方法
Html:
document.write('<div id=tooltip style="Z-Index:2000; BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 1px; VISIBILITY: hidden; PADDING-BOTTOM: 1px; FONT: 12px Arial CYR ; BORDER-LEFT: #666666 1px solid; COLOR: #333333; PADDING-TOP: 1px; BORDER-BOTTOM: #666666 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffcc; layer-background-color: #ffffcc"></div>');
var posX = 0;
var posY = 0;
function showToolTip(x)
{
var lobjCurrentDropdown = window.event.srcElement;
posX = getX(lobjCurrentDropdown);
posY = getY(lobjCurrentDropdown);
if (x==1) //A tooltip must be shown
{
if (lobjCurrentDropdown.selectedIndex >= 0)
{
document.all.tooltip.innerHTML = lobjCurrentDropdown[lobjCurrentDropdown.selectedIndex].text;
document.all.tooltip.style.left = posX + 2;
document.all.tooltip.style.top = posY + 30;
document.all.tooltip.style.visibility = "visible";
}
else
{
document.all.tooltip.innerHTML = "";
document.all.tooltip.style.visibility = "hidden";
}
}
else
{ //A tootip must not be shown
document.all.tooltip.style.visibility = "hidden";
}
}
function getX(obj)
{
return( obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+getX(obj.offsetParent) );
}
function getY(obj)
{
return( obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+getY(obj.offsetParent) );
}
后台
ddlCollection.Attributes.Add("onmouseover", "javascript:showToolTip(1);");
ddlCollection.Attributes.Add("onmouseout", "javascript:showToolTip(0);");
posted on 2008-09-25 17:11 joyous jeny 阅读(654) 评论(0) 编辑 收藏 举报