javascript - 与 jQuery 中的工具提示交互

Question

如何与 jQuery 中的工具提示进行交互？你知道，当你悬停一个<a>元素或一个<img>. 当我移动到那个标签时，我想让那个跟随我的光标。正是这样。

Answer 1

您可能想查看jQuery UI 的工具提示或QTip 插件。

Answer 2

鼠标跟踪工具提示的一部分：鼠标跟踪

我没试过，但看起来不错：再来一个

Answer 3

这是用于自定义工具提示的简单 jquery 插件。jsFiddle 你可以指定mouseFollow: true实现跟随光标的可移动工具提示。

JS

(function ($) {
    $.fn.tooltip = function (options) {

        var defaults = {
            background: '#fff',
            border: '1px solid #999',
            color: 'black',
            rounded: false,
            mouseFollow: false,
            textChangeOnClick: false
        },
        settings = $.extend({}, defaults, options);

        this.each(function () {

            var $this = $(this),
                title = null,
                hovering = null;

            //set class
            if (!settings.textChangeOnClick) {
                $this.addClass('_tooltip');
            }

            $(this).data('title', $this.attr('title'))
            $(this).attr('title', '');

            $this.hover(
                // mouse over 
                function (e) {

                //check change
                if ($this.attr('title') != '') {

                    if ($this.attr('title') != $this.data('title')) {

                        $this.data('title', $this.attr('title'));
                        $this.attr('title','');
                    }

                } else {

                    $this.removeAttr('title');
                }

                $this.attr('title', '');

                hovering = true;
                $('#tooltip').remove();

                //create box
                if ($this.data('title') != '') {

                    $('<div id="tooltip" />')
                        .appendTo('body')
                        .text($this.data('title'))
                        .hide()
                        .css({
                            backgroundColor: settings.background,
                            color: settings.color,
                            border: settings.border,
                            top: e.pageY + 10,
                            left: e.pageX + 20
                        })
                        .fadeIn(500);
                }

                if (settings.rounded) {
                    $('#tooltip').addClass('rounded');
                }

             },
             //mouse out
             function () {
                hovering = false;
                $('#tooltip').remove();
             });

            //text change
            if (settings.textChangeOnClick) {

            //on click
            $this.on('click', function () {

                if (hovering) {

                    //set new
                    $this.data('title',$(this).attr('title'));

                    $(this).attr('title', '');
                    $('#tooltip').text($this.data('title'));
                }
            });
        }

        //mouse follow
        if (settings.mouseFollow) {

            $this.mousemove(function (e) {
                $('#tooltip').css({
                    top: e.pageY + 10,
                    left: e.pageX + 20
                });
            });
        }
    });

    return this;
}


})(jQuery);

为元素设置插件

$('a').tooltip({
    mouseFollow: true
});

HTML

<a href="#" title="Hello"></a>

CSS

#tooltip
{
    border: 1px solid #BFBFBF;
    float: left;
    font-size: 11px;
    max-width: 250px;
    padding: 5px;
    position: absolute;
    color: #464646;
    z-index: 999999;
}
.rounded
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}