<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<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;

filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);

}

#dhtmlpointer{

position:absolute;

left: -300px;

z-index: 101;

visibility: hidden;

}

.myTest{width: 100px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}

</style>

</head>

<body>

<div class="myTest" onMouseover="ddrivetip($(this).text(), 300,'red')";

onMouseout="hideddrivetip()">ssssssss</div>

</body>

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

var offsetfromcursorX=12 //Customize x offset of tooltip

var offsetfromcursorY=10 //Customize y offset of tooltip

var 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">') //write out pointer image

var 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

//下面这段是用来判断，当字符串大于多少时才出现tip框。

var len = 0;

for (var i=0; i<thetext.length; i++) {

    //单字节加1

     if (thetext[i].match(/[^\x00-\xff]/ig) != null) {

       len+=2;

     }

     else {

      len++;

     }

    }

if(len > 10)

    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-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX

var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var 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=''

}

}

document.onmousemove=positiontip

</script>

</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. OpenCV On Android环境配置最新&最全指南(Android Studio篇)

    本文是从本人简书上搬运而来,属本人原创,如有转载,请注明出处:http://www.jianshu.com/p/6e16c0429044 简介 本文是<OpenCV On Android环境配置 ...

  2. [JSOI2019]精准预测（2-SAT+拓扑排序+bitset）

    设第i个人在t时刻生/死为(x,0/1,t),然后显然能够连上(x,0,t)->(x,0,t-1),(x,1,t)->(x,1,t+1),然后对于每个限制,用朴素的2-SAT连边即可. 但 ...

  3. python学习笔记（27）-unittest单元测试-测试用例

    单元测试 #单元测试 #unittest+接口 unittest python自带 pytest+jenkins+allure #接口测试的本质 就是测试类里面的函数 #单元测试的本质 测试函数 代码 ...

  4. redis day02 下

    位图:是二进制数据(0101101010)2^32 强势点: 01_login :101110(比如:第一天登录,二天没登录) 传统的字符串解决方案中 记录用户登录日期  统计堪忧 01_login_ ...

  5. O - Snacks（DFS序）

    百度科技园内有nn个零食机,零食机之间通过n−1n−1条路相互连通.每个零食机都有一个值vv,表示为小度熊提供零食的价值. 由于零食被频繁的消耗和补充,零食机的价值vv会时常发生变化.小度熊只能从编号 ...

  6. can't compute CFA for this frame

    解决方法: 将gdb更新到7.8.2版本以上 gdb --version   // 查看gdb版本 wget http://ftp.gnu.org/gnu/gdb/gdb-7.12.tar.gz ta ...

  7. Oracle-PL/SQL语句

    1.PL/SQL 2.存储过程,函数 3.java中调用存储过程和函数 4.触发器 1 PL/SQL 1.1什么是PL/SQL? n  PL:Process Language n  PL/SQL是or ...

  8. jmeter测试get post 笔记

    0 环境 系统环境:win7 1 操作 1 post 新建线程组 2 get 和post新建类似 http请求 只是新建一个参数化我测试的2个url http://127.0.0.1:8080/cry ...

  9. ADB命令-1

    1.adb -s 指定设备号(用于已连接多个设备时) 2.adb install -r -t xxx 安装程序 3.adb pull  设备目录   本地目录 复制文件命令 4.adb push 向设 ...

  10. cs231n spring 2017 lecture16 Adversarial Examples and Adversarial Training

    (没太听明白,以后再听) 1. 如何欺骗神经网络? 这部分研究最开始是想探究神经网络到底是如何工作的.结果人们意外的发现,可以只改变原图一点点,人眼根本看不出变化,但是神经网络会给出完全不同的答案.比 ...