zoukankan      html  css  js  c++  java
  • 让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);"); 

  • 相关阅读:
    Java++:常用工具|性能监测|服务监控
    Vue++:Vuecli4.x 的配置文件配置方法
    Vue++: gyp ERR! find Python
    Node++:Windows 环境搭建 Vue 开发环境
    linux++:free h 详解
    踩坑纪:windows 系统下,nodejs版本管理器无法使用n来管理
    Node++:NodeJs 版本管理工具(n | nvm)n教程
    Vue++:Error: 'XXX' is defined but never used (nounusedvars)报错的解决方案
    [MOSS]关闭弹出窗口
    安装 64 位版本的 Office 2010 后,无法查看数据表视图中的列表
  • 原文地址:https://www.cnblogs.com/glume/p/1298954.html
Copyright © 2011-2022 走看看