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

Javascript "Tooltip" with continuously changing content

本文关键字：工具提示 变化 Javascript      更新时间：2023-09-26

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

我找到了 qtip，但看起来它更倾向于声明性方法，其中工具提示中的文本不会不断更改。此外，对于简单的文本工具提示来说，它看起来有点矫枉过正。不过我可能是错的。

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

有一个

插件 http://koteako.com/hoverbox/

在鼠标移动时更改其内容

我最终稍微修改了悬停框插件，以允许在鼠标悬停元素时更新文本，以便我可以在其他鼠标悬停处理程序中设置 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);
    });
};
相关文章：