1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7.  
  8. #dhtmltooltip{
  9. position: absolute;
  10. left: -300px;
  11. width: 150px;
  12. border: 1px solid black;
  13. padding: 2px;
  14. background-color: lightyellow;
  15. visibility: hidden;
  16. z-index: 100;
  17. filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
  18. }
  19.  
  20. #dhtmlpointer{
  21. position:absolute;
  22. left: -300px;
  23. z-index: 101;
  24. visibility: hidden;
  25. }
  26. .myTest{width: 100px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
  27. </style>
  28. </head>
  29. <body>
  30.  
  31. <div class="myTest" onMouseover="ddrivetip($(this).text(), 300,'red')";
  32. onMouseout="hideddrivetip()">ssssssss</div>
  33.  
  34. </body>
  35. <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  36. <script type="text/javascript">
  37.  
  38. var offsetfromcursorX=12 //Customize x offset of tooltip
  39. var offsetfromcursorY=10 //Customize y offset of tooltip
  40.  
  41. var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
  42. var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
  43.  
  44. document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
  45. document.write('<img id="dhtmlpointer">') //write out pointer image
  46.  
  47. var ie=document.all
  48. var ns6=document.getElementById && !document.all
  49. var enabletip=false
  50. if (ie||ns6)
  51. var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
  52.  
  53. var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""
  54.  
  55. function ietruebody(){
  56. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  57. }
  58.  
  59. function ddrivetip(thetext, thewidth, thecolor){
  60. if (ns6||ie){
  61. if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  62. if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  63. tipobj.innerHTML=thetext
  64.  
  65. //下面这段是用来判断，当字符串大于多少时才出现tip框。
  66. var len = 0;
  67. for (var i=0; i<thetext.length; i++) {
  68.     //单字节加1
  69.      if (thetext[i].match(/[^\x00-\xff]/ig) != null) {
  70.        len+=2;
  71.      }
  72.      else {
  73.       len++;
  74.      }
  75.     }
  76.  
  77. if(len > 10)
  78.     enabletip=true
  79. return false
  80. }
  81. }
  82.  
  83. function positiontip(e){
  84. if (enabletip){
  85. var nondefaultpos=false
  86. var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
  87. var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
  88. //Find out how close the mouse is to the corner of the window
  89. var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
  90. var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
  91.  
  92. var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
  93. var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY
  94.  
  95. var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
  96.  
  97. //if the horizontal distance isn't enough to accomodate the width of the context menu
  98. if (rightedge<tipobj.offsetWidth){
  99. //move the horizontal position of the menu to the left by it's width
  100. tipobj.style.left=curX-tipobj.offsetWidth+"px"
  101. nondefaultpos=true
  102. }
  103. else if (curX<leftedge)
  104. tipobj.style.left="5px"
  105. else{
  106. //position the horizontal position of the menu where the mouse is positioned
  107. tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
  108. pointerobj.style.left=curX+offsetfromcursorX+"px"
  109. }
  110.  
  111. //same concept with the vertical position
  112. if (bottomedge<tipobj.offsetHeight){
  113. tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
  114. nondefaultpos=true
  115. }
  116. else{
  117. tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
  118. pointerobj.style.top=curY+offsetfromcursorY+"px"
  119. }
  120. tipobj.style.visibility="visible"
  121. if (!nondefaultpos)
  122. pointerobj.style.visibility="visible"
  123. else
  124. pointerobj.style.visibility="hidden"
  125. }
  126. }
  127.  
  128. function hideddrivetip(){
  129. if (ns6||ie){
  130. enabletip=false
  131. tipobj.style.visibility="hidden"
  132. pointerobj.style.visibility="hidden"
  133. tipobj.style.left="-1000px"
  134. tipobj.style.backgroundColor=''
  135. tipobj.style.width=''
  136. }
  137. }
  138.  
  139. document.onmousemove=positiontip
  140.  
  141. </script>
  142. </html>

当鼠标hover的时候，使用tip将overflow:hidden隐藏的文字显示完全的更多相关文章

  1. table 控制单双行颜色以及鼠标hover颜色 table光棒

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  3. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

  4. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. 简单的圆形图标鼠标hover效果 | CSS3教程

    演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...

  7. 鼠标hover事件

    JS: // ========== // = 鼠标hover事件 = // ========== function showHide (btn,box) { $(btn).hover(function ...

  8. 如何在鼠标hover时改变标注的样式

    如何在鼠标hover时改变标注的样式? ----------------    教程   ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...

  9. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. dubbo的本地存根

    在消费者创建存根类 修改消费者XML 也可以修改消费者注解

  2. 对《The future of ReactiveCocoa》的一些思考

    前言 我以为 第一次接触 swift 语言时,看到函数的表示形式如下: func fun(num: Int) -> Int { return num + 1 } let f = fun(1) 和 ...

  3. string.Format字符串格式化说明(转)

    string.Format字符串格式化说明 www.111cn.net 编辑:Crese 来源:转载   先举几个简单的应用案例: 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统 ...

  4. PyTorch基础——预测共享单车的使用量

    预处理实验数据 读取数据 下载数据 网盘链接:https://pan.baidu.com/s/1n_FtZjAswWR9rfuI6GtDhA 提取码:y4fb #导入需要使用的库 import num ...

  5. J. Stone game（背包问题）

    题:https://nanti.jisuanke.com/t/41420 定义 dp[x][y] 表示第 x 个数到最后一个数能组成和为 y 的方案数 #include<bits/stdc++. ...

  6. window下mysql安装步骤

    1. 官网下载mysql zip包 2. 解压后再D:\database\mysql\mysql-5.7.26-winx64下添加my.ini文件,文件内容如下: [mysql]# 设置mysql客户 ...

  7. Java常用基本类库总结2

    1.File类的重要方法(Java中文件.文件夹都用File类表示) 构造函数: public File(String pathname);//根据指定的路径创建File对象. public File ...

  8. 变得“不正经”的CES，竟然越来越好玩了

    在所有科技界的展会中,国人最熟悉的当属CES.作为科技行业的风向指示标,CES一直在扮演着重要的潮流指引者角色.不过,现在的CES似乎变得越来越"不正经"了!原本CES是国际消费类 ...

  9. BigDecimal不整除的一个异常java.lang.ArithmeticException

    转载地址:http://blog.csdn.net/jobjava/article/details/6764623 金额的数据类型是BigDecimal 通过BigDecimal的divide方法进行 ...

  10. Yii框架的学习指南（策码秀才篇）1-1 如何认识Yii framework

    Yii的框架和其他框架的区别在于:它是更加 快速,安全,专业的PHP框架 Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii是一个基于组件.用于开发大型 Web 应用的 高性能 P ...