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

雨点打透心脏的1/2处 2021-12-22 13:13 478阅读 1赞

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

转载于:https://www.cnblogs.com/meierbao/p/4960699.html