Javascript"；工具提示“；内容不断变化

我有一个canvas元素，我想在鼠标指针后显示一个工具提示，工具提示中的文本根据指针下当前的内容不断变化

我发现，但它看起来更倾向于一种声明式方法，在这种方法中，工具提示中的文本不会不断变化。此外，对于一个简单的文本工具提示来说，它看起来有点过分了。不过我可能错了

那么，如何使用javascript（允许使用任何库）显示工具提示（能够不断更改其内容和坐标）？

有一个插件

Folow your mouse您必须在mousemove上更改其内容

我最后稍微修改了插件，以便在鼠标悬停元素时更新文本，以便我可以在其他鼠标悬停处理程序中设置title属性来更新鼠标悬停框：

/*
 * jQuery Hoverbox 1.0
 * http://koteako.com/hoverbox/
 *
 * Copyright (c) 2009 Eugeniy Kalinin
 * Dual licensed under the MIT and GPL licenses.
 * http://koteako.com/hoverbox/license/
 */
/*
*  Slightly modfied to allow for updating the text
*  of the hoverbox while mouseover the element
*/
jQuery.fn.hoverbox = function(options) {
    var settings = jQuery.extend({
        id: 'tooltip',
        top: 0,
        left: 15
    }, options);

    var handle;
    var that;

    function tooltip(event) {
        if ( ! handle) {
            // Create an empty div to hold the tooltip
            handle = $('<div style="position:absolute;background:white;border:black;" id="'+settings.id+'"></div>').appendTo(document.body).hide();
        }

        if (event) {
            //update the text
            that.t = that.title;
            that.title = '';
            handle.html(that.t);

            // Make the tooltip follow a cursor
            handle.css({
                top: (event.pageY - settings.top) + "px",
                left: (event.pageX + settings.left) + "px"
            });
        }
        return handle;
    }

    this.each(function() {
        $(this).hover(
            function(e) {
                that = this;
                tooltip(e).fadeIn('fast');
            },
            function() {
                if (this.t) {
                    this.title = this.t;
                    tooltip().hide();
                }
            }
        );
        $(this).mousemove(tooltip);
    });
};

/*
*jQuery鼠标悬停框1.0
* http://koteako.com/hoverbox/
*
*版权所有（c）2009尤金尼·加里宁
*MIT和GPL许可下的双重许可。
* http://koteako.com/hoverbox/license/
*/
/*
*稍微修改以允许更新文本
*鼠标悬停在元素上时悬停框的
*/
jQuery.fn.hoverbox=函数（选项）{
var settings=jQuery.extend({
id:“工具提示”，
排名：0，
左：15
}，选项）；
变量句柄；
var表示；
函数工具提示（事件）{
如果（！句柄）{
//创建一个空div来保存工具提示
handle=$（''）.appendTo（document.body.hide（）；
}
如果（事件）{
//更新文本
that.t=that.title；
标题=''；
html（that.t）；
//使工具提示跟随光标
handle.css({
顶部：（event.pageY-settings.top）+“px”，
左：（event.pageX+settings.left）+“px”
});
}
返回手柄；
}
这个。每个（函数（）{
$（此）。悬停(
职能（e）{
那=这个；
工具提示（e）.fadeIn（'fast'）；
},
函数（）{
如果（此.t）{
this.title=this.t；
工具提示（）.hide（）；
}
}
);
$（此）.mousemove（工具提示）；
});
};

这将设置鼠标上方的文本，您无法连续更改。谢谢您的回答。这是有用的。