<!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. typescript--介绍ts

    TypeScript 介绍 TypeScript 是什么 TypeScript 是 JavaScript 的强类型版本.然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码.由于最终 ...

  2. 解决LoadRunner服务器返回乱码

  3. 吴裕雄--天生自然 PYTHON3开发学习：OS 文件/目录方法

    import os, sys # 假定 /tmp/foo.txt 文件存在,并有读写权限 ret = os.access("/tmp/foo.txt", os.F_OK) prin ...

  4. TextBox换行C#文本框换行.net文本框换行textarea换行

    在TextBox中输入的内容,显示的时候如果用lable显示,无法换行 可以使用TextBox输入,然后也使用TextBox 显示,这样换行输入的内容,显示的时候也可以换行.显示的时候可以设置一下控件 ...

  5. 14 微服务电商【黑马乐优商城】：day06-使用nginx反向代理并掌握cors解决跨域

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  6. vue 项目在scope中使用@import引入css ，作用域是全局

    有时候引入第三ui插件,修改样式 时候,需要再单独定义style标签,才有效果,可是会影响全局影响全局,如下所示 加上/deep/,就可以了,

  7. MySql 按日期条件查询数据

    本周内: select * from wap_content where week(created_at) = week(now) 查询一天: select * from table where to ...

  8. Exynos4412开发板-网络-同一网段

    1.1 同一网段在不少实验中,都会需要用到局域网的一些基础知识,在技术支持的过程中,发现不少用户对于这个概念非常模糊,导致 IP 地址或者网络环境稍微有点变化,就无法实现实验.如果没有接触过这个概念, ...

  9. Docker系列七: 使用Humpback管理工具管理容器(一款UI管理工具)

    Humpback 可以帮助企业快速搭建轻量级的 Docker 容器云管理平台,若将你的 Docker 主机接入到 Humpback 平台中,就能够为你带来更快捷稳定的容器操作体验. 功能特点 Web操 ...

  10. 阿里巴巴IconFont的使用方式

    一.解释一下为什么要使用IconFont? IconFont顾名思义就是把图标用字体的方式呈现. 其优点在于以下几个方面: 1.可以通过css的样式改变其颜色:(最霸气的理由) 2.相对于图片来说,具 ...