Question

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

我找到了qtip，但看起来它更像是一种声明性方法，你的工具提示中的文字不断变化。对于简单的文本工具提示，它看起来有点过分。我可能错了。

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

Answer 1

theres a plugin http://koteako.com/hoverbox/

跟随鼠标yoast更改其在mousemove上的内容

Answer 2

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

/*
 * 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);
    });
};

Javascript“工具提示”，内容不断变化

2 个答案: