工具提示框 [英] Tooltip box
问题描述
使用下面的代码，我可以显示/隐藏工具提示而不会出现任何问题，但是一旦显示工具提示，其位置就固定了
（基于何处）鼠标首先徘徊在物体上）我会像工具提示那样用b b来跟踪鼠标。
我必须改变什么才能做到这一点？
HTML
< a href ="＃" onMouseOver =" showBox（''help''，''要显示的文字''）"
onMouseOut =" hideBox（''help''）"> text link< / a>
JS
函数hideLayer（strLayer）{
if（document.getElementById）{
d = document.getElementById（strLayer）;
if（d）{
d.style.visibility =''hidden'';
d.style.display =''none'';
}
}
else if（document.all）{
d = eval（''document.all [\''''+ strLayer +''\'']''）;
if（d）{
eval（''document.all [\''''+ strLayer +''\'']。style.visibility = \''hidden
\''' '）;
eval（''document.all [\''''+ strLayer +''\'']。style.display = \''none \'''' ）;
}
}
}
函数showLayer（strLayer）{
如果（doc ument.getElementById）{
d = document.getElementById（strLayer）;
d.style.visibility =''visible'';
d .style.display =''block'';
}
else if（document.all）{
eval（''document。所有[\''''+ strLayer +''\'']。style.visibility = \''visible
\'''';
eval（''document.all [\''''+ strLayer +''\'']。style.display = \''block \''''）;
}
}
函数getObj（名称）{
if（document.getElementById）{
this.obj = document.getElementById（name）;
this.style = document.getElementById（name）.style;
}
else if（document .all）{
this.obj = document.all [name];
this.style = document.all [name] .style;
}
else if（document.layers）{
this.obj = document.layers [name];
this.style = DOCUME nt.layers [name];
}
返回此内容;
}
document.onmousemove = getMousePosition;
if（！document.all）document.captureEvents（Event.MOUSEMOVE）;
var mouse_x = 0;
var mouse_y = 0;
函数getMousePosition（e）{
if（！e）var e = window.event;
if（e.pageX || e.pageY）{
mouse_x = e.pageX;
mouse_y = e.pageY;
}
否则if（e.clientX || e.clientY）{
mouse_x = e.clientX +（document.documentElement？
document.documentElement.scrollLeft：document.body。 scrollLeft）;
mouse_y = e.clientY +（document.documentElement？
document.documentElement.scrollTop：document.body.scrollTop）;
}
}
函数showBox（name，msg）{
var x =（mouse_x + 20）+''px'';
var y =（mouse_y + 0）+''px'';
var box = getObj（name）;
box.obj.innerHTML = msg;
box.style.position =''absolute'';
box.style.top = y;
box.style.left = x;
showLayer（name）;
}
function hideBox（name）{
hideLayer（姓名）;
}
Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?
HTML
<a href="#" onMouseOver="showBox(''help'',''text to display'')"
onMouseOut="hideBox(''help'')">text link</a>
JS
function hideLayer(strLayer) {
if (document.getElementById) {
d = document.getElementById(strLayer);
if (d) {
d.style.visibility = ''hidden'';
d.style.display = ''none'';
}
}
else if (document.all) {
d = eval(''document.all[\''''+strLayer+''\'']'');
if (d) {
eval(''document.all[\''''+strLayer+''\''].style.visibility = \''hidden
\'''');
eval(''document.all[\''''+strLayer+''\''].style.display = \''none\'''');
}
}
}
function showLayer(strLayer) {
if (document.getElementById) {
d = document.getElementById(strLayer);
d.style.visibility = ''visible'';
d.style.display = ''block'';
}
else if (document.all) {
eval(''document.all[\''''+strLayer+''\''].style.visibility = \''visible
\'''');
eval(''document.all[\''''+strLayer+''\''].style.display = \''block\'''');
}
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
return this;
}
document.onmousemove = getMousePosition;
if (!document.all) document.captureEvents(Event.MOUSEMOVE);
var mouse_x = 0;
var mouse_y = 0;
function getMousePosition(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.documentElement ?
document.documentElement.scrollLeft : document.body.scrollLeft);
mouse_y = e.clientY + (document.documentElement ?
document.documentElement.scrollTop : document.body.scrollTop);
}
}
function showBox(name, msg) {
var x = (mouse_x + 20) + ''px'';
var y = (mouse_y + 0) + ''px'';
var box = getObj(name);
box.obj.innerHTML = msg;
box.style.position = ''absolute'';
box.style.top = y;
box.style.left = x;
showLayer(name);
}
function hideBox(name) {
hideLayer(name);
}
推荐答案
Kim写道：
Kim wrote:
使用下面的代码，我能够显示/隐藏工具提示，而不会出现任何问题，但是一旦显示工具提示，其位置就固定了
（基于鼠标首先徘徊在物体上）我会像工具提示一样跟随鼠标而不是
。
我必须改变什么才能做到这一点？
Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?
有很多库可以做到这一点，为什么要重新发明轮子？无论如何，
我能看到的最简单的改变：
There are many libraries to do this so why reinvent the wheel? Anyway,
the simplest change I can see:
var mouse_x = 0;
var mouse_y = 0 ;
var mouse_x = 0;
var mouse_y = 0;
var box = null; //移动为全局
var box = null; // moved to be a global
function getMousePosition（e）{
if（！e）var e = window.event;
if（e.pageX || e.pageY）{
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if（e.clientX || e.clientY）{
mouse_x = e.clientX +（document.documentElement？
document.documentElement.scrollLeft：document.body.scrollLeft）;
mouse_y = e.clientY +（document.documentElement？
document.documentElement.scrollTop： document.body.scrollTop）;
}
function getMousePosition(e) {
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouse_x = e.pageX;
mouse_y = e.pageY;
}
else if (e.clientX || e.clientY) {
mouse_x = e.clientX + (document.documentElement ?
document.documentElement.scrollLeft : document.body.scrollLeft);
mouse_y = e.clientY + (document.documentElement ?
document.documentElement.scrollTop : document.body.scrollTop);
}
if（box）placeBox（）;
if (box) placeBox();
}
函数showBox（name，msg）{
}
function showBox(name, msg) {
box = getObj（name）; //注意没有''var''使用全局
//这应该是一次检查失败
box = getObj(name); // note no ''var'' using global
// should really be a check failure here
box.obj.innerHTML = msg;
box.style.position =''absolute'';
box.obj.innerHTML = msg;
box.style.position = ''absolute'';
placeBox（）;
placeBox();
showLayer（name）;
}
function hideBox（name）{
hideLayer（name）;
showLayer(name);
}
function hideBox(name) {
hideLayer(name);
box = null;
box = null;
}
}
function placeBox（）{
box.style。 top =（mouse_x + 20）+''px'';
box.style.left =（mouse_y + 0）+''px'';
}
Robin
function placeBox() {
box.style.top = (mouse_x + 20) + ''px'';
box.style.left = (mouse_y + 0) + ''px'';
}
Robin
11月4日，9：32 * am，Kim< kims ... @ gmail.comwrote：
On Nov 4, 9:32*am, Kim <kims...@gmail.comwrote:
使用下面的代码，我可以显示/隐藏工具提示而不会出现任何问题，但是一旦显示工具提示，其位置就会被修复
Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
没有任何问题你可以看到。
Without any problems that you can see.
（基于鼠标第一次徘徊在哪里对象）我会像工具提示一样跟随鼠标而不是
。
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
这太刺激而且没有意义。
That is so irritating and pointless.
我必须改变什么才能做到这一点？
HTML
< a href ="＃" onMouseOver =" showBox（''help''，''要显示的文字''）"
onMouseOut =" hideBox（''help''）"> text link< /一个>
What must I change to do this ?
HTML
<a href="#" onMouseOver="showBox(''help'',''text to display'')"
onMouseOut="hideBox(''help'')">text link</a>
链接无处可去？可能会在某些
浏览器中导航到页面顶部。
Link goes nowhere? Might navigate to the top of the page in some
browsers.
>
JS
函数hideLayer（strLayer）{
* * * * if（document.getElementById）{
>
JS
function hideLayer(strLayer) {
* * * * if (document.getElementById) {
不测试主机以这种方式对象方法。使用类型
运算符。在组中搜索isHostMethod。
Do not test host object methods in this manner. Use the typeof
operator. Search the group for "isHostMethod".
* * * * * * * * d = document.getElementById（strLayer）;
* * * * * * * * if（d）{
* * * * * * * * * * * * d.style.visibility =''hidden'';
* * * * * * * * * * * * d.style.display =''none'';
* * * * * * * *}
* * * *}
* * * * if if（document.all）{
* * * * * * * * d = document.getElementById(strLayer);
* * * * * * * * if (d) {
* * * * * * * * * * * * d.style.visibility = ''hidden'';
* * * * * * * * * * * * d.style.display = ''none'';
* * * * * * * * }
* * * * }
* * * * else if (document.all) {
这里是轮子的地方结束。
Here''s where the wheels come off.
* * * * * * * * d = eval（''document.all [\''''+ strLayer +''\' ']''）;
* * * * * * * * if（d）{
* * * * * * * * * * * * eval（' 'document.all [\''''+ strLayer +''\'']。style.visibility = \''hidden
\''''）;
* * * * * * * * * * * * eval（''document.all [\''''+ strLayer +''\'']。style.display = \''none \\''''）;
* * * * * * * *}
* * * *}}
* * * * * * * * d = eval(''document.all[\''''+strLayer+''\'']'');
* * * * * * * * if (d) {
* * * * * * * * * * * * eval(''document.all[\''''+strLayer+''\''].style.visibility = \''hidden
\'''');
* * * * * * * * * * * * eval(''document.all[\''''+strLayer+''\''].style.display = \''none\'''');
* * * * * * * * }
* * * * }}
你从哪里来的？如果你发现自己正在使用eval，那么你可能会在杂草中消失。
Where did you pick that up? If you find yourself using eval, you are
likely off in the weeds.
>
功能showLayer（strLayer）{
* * * * if（document.getElementById）{
* * * * * * * * d = document.getElementById（strLayer）;
* * * * * * * * d.style.visibility =''visible'';
* * * * * * * * d.style.display =' 'block'';
* * * *}
* * * * if if（document.all）{
* * * * * * * * eval（''document.all [\''''+ strLayer +''\'']。style.visibility = \''visible
\''' '）;
* * * * * * * * eval（''document.all [\''''+ strLayer +''\'']。style.display = \' 'block \'''';
* * * *}}
>
function showLayer(strLayer) {
* * * * if (document.getElementById) {
* * * * * * * * d = document.getElementById(strLayer);
* * * * * * * * d.style.visibility = ''visible'';
* * * * * * * * d.style.display = ''block'';
* * * * }
* * * * else if (document.all) {
* * * * * * * * eval(''document.all[\''''+strLayer+''\''].style.visibility = \''visible
\'''');
* * * * * * * * eval(''document.all[\''''+strLayer+''\''].style.display = \''block\'''');
* * * * }}
对此虚拟复制的评论相同。
Same comments for this virtual duplication.
>
function getObj（name）{
* * * * if（document.getElementById）{
* * * * * * * * this.obj = document.getElementById（name）;
* * * * * * * * this.style = document.getElementById（name）.style;
* * * *}
* * * * if if（document .all）{
* * * * * * * * this.obj = document.all [name];
* * * * * * * * this.style = document.all [name] .style;
* * * *}
>
function getObj(name) {
* * * * if (document.getElementById) {
* * * * * * * * this.obj = document.getElementById(name);
* * * * * * * * this.style = document.getElementById(name).style;
* * * * }
* * * * else if (document.all) {
* * * * * * * * this.obj = document.all[name];
* * * * * * * * this.style = document.all[name].style;
* * * * }
这次没有评估？
No eval this time?
* * * * if if（document.layers）{
* * * * * * * * this.obj = document.layers [name];
* * * * * * * * this.style = document.layers [name];
* * * *}
* * * * else if (document.layers) {
* * * * * * * * this.obj = document.layers[name];
* * * * * * * * this.style = document.layers[name];
* * * * }
显然你可能会失去这个分支。它仅适用于NN4，并且在此脚本的上下文中没有任何感觉。
Clearly you can lose this branch. It is only for NN4 and makes no
sense in the context of this script.
* * * *返回此内容;}
document.onmousemove = getMousePosition;
* * * * return this;}
document.onmousemove = getMousePosition;
最好在第一次使用之前声明函数。
It is good practice to declare functions before their first use.
if（！document.all ）document.captureEvents（Event.MOUSEMOVE）;
if (!document.all) document.captureEvents(Event.MOUSEMOVE);
这可能是最糟糕的对象推断（一种浏览器嗅探）
我见过。你在哪里找到这些东西？
That might be the worst object inference (a form of browser sniffing)
I have ever seen. Where did you find this stuff?
var mouse_x = 0;
var mouse_y = 0;
函数getMousePosition（e）{
* * * * if（！e）var e = window.event;
var mouse_x = 0;
var mouse_y = 0;
function getMousePosition(e) {
* * * * if (!e) var e = window.event;
e = e || window.event;
e = e || window.event;
* * * * if（e.pageX || e.pageY）{
* * * * if (e.pageX || e.pageY) {
错了。如果两者都为0会怎么样？
Wrong. What if both are 0?
* * * * * * * * mouse_x = e.pageX;
* * * * * * * * mouse_y = e.pageY;
* * * *}
* * * * if if（e.clientX || e.clientY）{
* * * * * * * * mouse_x = e.pageX;
* * * * * * * * mouse_y = e.pageY;
* * * * }
* * * * else if (e.clientX || e.clientY) {
在这里相同。
Same here.
* * * * * * * * mouse_x = e.clientX +（document.documentElement？
document.documentElement.scrollLeft：document.body.scrollLeft）;
* * * * * * * * mouse_x = e.clientX + (document.documentElement ?
document.documentElement.scrollLeft : document.body.scrollLeft);
错误。 documentElement属性以quirks模式定义。你应该测试一下scrollLeft / Top属性。
Wrong. The documentElement property is defined in quirks mode. You
should be testing the scrollLeft/Top properties.
* * * * * * * * mouse_y = e.clientY +（document .documentElement？
document.documentElement.scrollTop：document.body.scrollTop）;
* * * *}}
* * * * * * * * mouse_y = e.clientY + (document.documentElement ?
document.documentElement.scrollTop : document.body.scrollTop);
* * * * }}
同样在这里。
Same here.
>
函数showBox（name，msg）{
* * * * var x =（mouse_x + 20）+''px'';
* * * * var y =（mouse_y + 0）+''px'';
* * * * var box = getObj（name）;
* * * * box.obj.innerHTML = msg;
* * * * box.style.position =''absolute'';
* * * * box.style.top = y;
* * * * box.style.left = x;
* * * * showLayer（name）;}
函数hideBox（名称）{
* * * * hideLayer（姓名）;
}
>
function showBox(name, msg) {
* * * * var x = (mouse_x + 20) + ''px'';
* * * * var y = (mouse_y + 0) + ''px'';
* * * * var box = getObj(name);
* * * * box.obj.innerHTML = msg;
* * * * box.style.position = ''absolute'';
* * * * box.style.top = y;
* * * * box.style.left = x;
* * * * showLayer(name);}
function hideBox(name) {
* * * * hideLayer(name);
}
我建议你查看title属性。大多数浏览器都会将它变成工具提示。此外，搜索引擎，屏幕阅读器，
文本浏览器等将能够看到内容。没有脚本
需要。那应该可以省去很多麻烦。
I advise you to look into the title attribute. Most browsers will
turn it into a tooltip. Furthermore, search engines, screen readers,
text browsers, etc. will be able to see the content. No script
required. That should save you a lot of trouble.
11月4日上午10：01 *，Robin< a ... @ somewhere.comwrote：
On Nov 4, 10:01*am, Robin <a...@somewhere.comwrote:
Kim写道：
Kim wrote:
使用下面的代码我可以显示/隐藏工具提示而无需任何
问题，但是一旦显示工具提示，它的位置是固定的
（基于鼠标第一次徘徊在物体上的位置）我会像工具提示那样
改为关注鼠标。
我必须改变什么才能做到这一点？
Using the code below am I able to display/hide a tooltip without any
problems, however once the tooltip is displayed its position is fixed
(based on where the mouse first hovered onto the object) and I would
like the tooltip to follow the mouse instead.
What must I change to do this ?
有很多库可以做到这一点，为什么要重新发明轮子？无论如何，
我能看到的最简单的改变：
There are many libraries to do this so why reinvent the wheel? Anyway,
the simplest change I can see:
命名一个值得的。
以前的尝试不足时应该重新发明轮子。
Name one that is worthwhile. Wheels should be re-invented when
previous attempts fall short.
这篇关于工具提示框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
