Question

我正在使用此工具提示插件： http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

它非常有用且可高度自定义，因为您可以使用您定义为工具提示的HTML元素，并且非常快速地初始化;您只需要在触发元素的rel属性中定义要用作工具提示的元素的id。

我使用了很多不同的div，所以这对我很有帮助。

只是有一点问题。我希望它跟随鼠标没有静态位置。

我最后添加了一些内容：

$(document).mousemove(function (e) {
    amouseX = e.pageX - 30;
    amouseY = e.pageY + 20;
    $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
});

这与displayballoontip（obj，e）

有关

dropmenuobj.x = amouseX
dropmenuobj.y = amouseY

并更改了每个可见性：隐藏显示：代码中没有。因为在我添加了这些之后，工具提示在浏览器显示中引起了一些滚动问题：没有修复它们。

但现在我在使用Internet Explorer时遇到了一些问题。它在许多不同的方面都不能很好地工作，例如：我可以看到工具提示从屏幕上的某个地方移动到鼠标，工具提示不会立即消失。

这里是我所做的一切的代码：

var disappeardelay=0  //tooltip disappear delay (in miliseconds)
var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
var enablearrowhead=0 //0 or 1, to disable or enable the arrow image
var arrowheadimg=["arrowdown.gif", "arrowup.gif"] //path to down and up arrow images
var arrowheadheight=11 //height of arrow image (amount to reveal)

/////No further editting needed
var ie=document.all
var ns6=document.getElementById&&!document.all
verticaloffset=(enablearrowhead)? verticaloffset+arrowheadheight : verticaloffset

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e){
//dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (e.type=="mouseover")
obj.display="block"
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
if (whichedge=="rightedge"){
edgeoffsetx=0
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffsetx=dropmenuobj.contentmeasure-obj.offsetWidth
if (dropmenuobj.x-edgeoffsetx+dropmenuobj.contentmeasure>windowedge)
edgeoffsetx=dropmenuobj.x-windowedge+dropmenuobj.contentmeasure
return edgeoffsetx
}
else{
edgeoffsety=0
var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) //move up?
edgeoffsety=dropmenuobj.contentmeasure+obj.offsetHeight+(verticaloffset*2)
return edgeoffsety
}
}

function displayballoontip(obj, e){ //main ballooon tooltip function
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous tooltip?
dropmenuobj.style.display="none"
clearhidemenu()
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(obj.getAttribute("rel"))
showhide(dropmenuobj.style, e)
dropmenuobj.x = amouseX
dropmenuobj.y = amouseY
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
if (enablearrowhead)
displaytiparrow()
}

function displaytiparrow(){ //function to display optional arrow image associated with tooltip
tiparrow=document.getElementById("arrowhead")
tiparrow.src=(edgeoffsety!=0)? arrowheadimg[0] : arrowheadimg[1]
var ieshadowwidth=(dropmenuobj.filters && dropmenuobj.filters[0])? dropmenuobj.filters[0].Strength-1 : 0
//modify "left" value depending on whether there's no room on right edge of browser to display it, respectively
tiparrow.style.left=(edgeoffsetx!=0)? parseInt(dropmenuobj.style.left)+dropmenuobj.offsetWidth-tiparrow.offsetWidth-10+"px" : parseInt(dropmenuobj.style.left)+5+"px"
//modify "top" value depending on whether there's no room on right edge of browser to display it, respectively
tiparrow.style.top=(edgeoffsety!=0)? parseInt(dropmenuobj.style.top)+dropmenuobj.offsetHeight-tiparrow.offsetHeight-ieshadowwidth+arrowheadheight+"px" : parseInt(dropmenuobj.style.top)-arrowheadheight+"px"
tiparrow.style.display="block"
}

function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.display='none';  if (enablearrowhead) tiparrow.style.display='none'",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

function reltoelement(linkobj){ //tests if a link has "rel" defined and it's the ID of an element on page
var relvalue=linkobj.getAttribute("rel")
return (relvalue!=null && relvalue!="" && document.getElementById(relvalue)!=null && document.getElementById(relvalue).className=="tooltip")? true : false
}

function initalizetooltip(){
var all_links=document.getElementsByTagName("a")
if (enablearrowhead){
tiparrow=document.createElement("img")
tiparrow.setAttribute("src", arrowheadimg[0])
tiparrow.setAttribute("id", "arrowhead")
document.body.appendChild(tiparrow)
}
for (var i=0; i<all_links.length; i++){
if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
all_links[i].onmouseover=function(e){
var evtobj=window.event? window.event : e
displayballoontip(this, evtobj)
}
all_links[i].onmouseout=delayhidemenu
}
}
}

if (window.addEventListener)
window.addEventListener("load", initalizetooltip, false)
else if (window.attachEvent)
window.attachEvent("onload", initalizetooltip)
else if (document.getElementById)
window.onload=initalizetooltip

$(document).mousemove(function (e) {
    amouseX = e.pageX - 30;
    amouseY = e.pageY + 20;
    $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
});

Answer 1

鼠标移动事件有一个功能你可以用它来更新职位

http://api.jquery.com/mousemove/

Answer 2

这是一个快速工作的例子：

编辑几乎没有改进：

<html>
<head>

<script>

var divName = 'follower'; 
var offX = 15;
var offY = 15;     

function mouseX(evt) {

    if (!evt) evt = window.event; 
    if (evt.pageX) {

        return evt.pageX; 

    }
    else if (evt.clientX) {

        return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);

    }
    else {

        return 0;

    }

}

function mouseY(evt) {

    if (!evt) {

        evt = window.event; 
        if (evt.pageY) {

            return evt.pageY; 

        }

    }
    else if (evt.clientY) {

        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 

    }
    else {

        return 0;

    }

}

function follow(evt) {

    if (document.getElementById) {

        var obj = document.getElementById(divName).style; obj.visibility = 'visible';
        obj.left = (parseInt(mouseX(evt))+offX) + 'px';
        obj.top = (parseInt(mouseY(evt))+offY) + 'px';

    }

}

</script>

<style>

#follower {
    position:absolute; 
    overflow:hidden; 
    visibility: hidden;
    z-index:999; 
    width:100px; 
    height:100px;
    background-color:#ccc;
    color: #000;
} 

.item {

    color: #000;
    font-weight: bold;
    cursor: pointer;

}

</style>

</head>
<body>

<div class="item" onclick="follow(event); document.onmousemove = follow;">
    click me for tooltip
</div>

<div id="follower">  
Hey I am a shadow!
</div>

</body>
</html>

Answer 3

$(document).mousemove(function (e) {
    amouseX = e.pageX - 30;
    amouseY = e.pageY + 20;
    $(".tooltip").css({ left: amouseX + "px", top: amouseY + "px" });
});

这使得工具提示随鼠标移动但存在一些问题。我已经编辑了解释问题的问题并将代码置于最后状态。

制作工具提示插件遵循鼠标而不是静态位置

3 个答案: