<!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. dlib安装踩过的坑

    使用到dlib时遇到了下载错误,不能正常安装 以下是成功安装的记录: 首先打开Anaconda prompt选定一个python环境,安装cmake和boost pip install cmake - ...

  2. CodeForces 996B World Cup（思维）

    https://codeforces.com/problemset/problem/996/B 题意: 圆形球场有n个门,Allen想要进去看比赛.Allen采取以下方案进入球场:开始Allen站在第 ...

  3. 吴裕雄--天生自然 pythonTensorFlow图形数据处理：数据集基本使用方法

    import tempfile import tensorflow as tf # 1. 从数组创建数据集. input_data = [1, 2, 3, 5, 8] dataset = tf.dat ...

  4. log4j中%5p的含义

    因为日志级别分别有error,warn,info,debug,fatal5种,有些是5个字母的,有些是4个字母的,如果直接写%p就会对不齐,%-5p的意思是日志级别输出左对齐,右边以空格填充,%5p的 ...

  5. RAM-Based Shift Register (ALTSHIFT_TAPS) IP Core-实现3X3像素阵列存储

    最近想要实现CNN的FPGA加速处理,首先明确在CNN计算的过程中,因为卷积运算是最耗时间的,因此只要将卷积运算在FPGA上并行实现,即可完成部分运算的加速 那么对于卷积的FPGA实现首先要考虑的是卷 ...

  6. 吴裕雄--天生自然 JAVA开发学习：序列化

    public final void writeObject(Object x) throws IOException public final Object readObject() throws I ...

  7. D - Association for Control Over Minds Kattis - control （并查集+STL）

    You are the boss of ACM (Association for Control over Minds), an upstanding company with a single go ...

  8. rest framework-序列化-长期维护

    ###############   表结构    ############### from django.db import models class Book(models.Model): titl ...

  9. 用@font-face应用自定义字体

    @font-face格式 @font-face { font-family: <YourWebFontName>; src: <source> [<format>] ...

  10. EXAM-2018-8-10

    EXAM-2018-8-10 F 突然卡了一会的水题 M 这题有点坑 考虑到一个数列的第一个数肯定会有 我们可以贪心的认为最优的方案是一个数列的第一个与另一个数列所有数的和.但是很容易找到反例 1 2 ...