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

<!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隐藏的文字显示完全的更多相关文章

table 控制单双行颜色以及鼠标hover颜色 table光棒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
Echarts 地图（map）插件之鼠标HOVER和tooltip自定义提示框
[自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...
HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
简单的圆形图标鼠标hover效果 | CSS3教程
演示本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...
鼠标hover事件
JS: // ========== // = 鼠标hover事件 = // ========== function showHide (btn,box) { $(btn).hover(function ...
如何在鼠标hover时改变标注的样式
如何在鼠标hover时改变标注的样式? ---------------- 教程 ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html> <head> <meta charset="utf-8"> ...

随机推荐

题解-------CF372C Watching Fireworks is Fun
传送门一道有趣的DP 题目大意城镇中有$n$个位置,有$m$个烟花要放.第$i$个烟花放出的时间记为$t_{i}$,放出的位置记为$a_{i}$.如果烟花放出的时候,你处在位置$x$,那么你将收获 ...
你必须知道的基本位运算技巧(状压DP、搜索优化都会用到)
一．位操作基础基本的位操作符有与.或.异或.取反.左移.右移这6种,它们的运算规则如下所示: 符号描述运算规则 & 与两个位都为1时,结果才为1 | 或两个位都为0时,结果才为0 ...
Spring和MyBatis的集成
Spring和MyBatis的整合 1. Spring和各个框架的整合 Spring目前是JavaWeb开发中最终的框架,提供一站式服务,可以其他各个框架整合集成 Spring整合方案 1.1. ...
17.3.15---关于GPIO学习笔记
STM32的IO口可以由软件配置成为8种模式: 1--输入浮空 2--输入上拉 3--输入下拉 4--模拟输入 5--开漏输出 6--推挽输出 7--推挽复用 8--开漏复用 STM32的每个IO口都 ...
黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法黑马eesy_15 Vue:03.生命周期黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
c语言中，为什么以下程序直接按”Enter“也就是回车程序不结束？
/************************************************************************* > File Name: system.c ...
tensorflow(七)
一.模型托管工具 TensorFlow Serving TensorFlow Serving支持生产级的服务部署,允许用户快速搭建从模型训练到服务发布的工作流水线. 工作流水线主要由三部分构成 (1) ...
TPO5-1 Minerals and plants
Only recently have investigators considered using these plants to clean up soil and waste sites that ...
xianduanshu
https://www.cnblogs.com/xenny/p/9739600.html ***************https://blog.csdn.net/shiqi_614/article/ ...
RAM-Based Shift Register (ALTSHIFT_TAPS) IP Core-实现3X3像素阵列存储
最近想要实现CNN的FPGA加速处理,首先明确在CNN计算的过程中,因为卷积运算是最耗时间的,因此只要将卷积运算在FPGA上并行实现,即可完成部分运算的加速那么对于卷积的FPGA实现首先要考虑的是卷 ...

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

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

随机推荐

热门专题