javascript - jQuery でツールチップを操作する

Question

jQuery でツールチップを操作するにはどうすればよいですか? ご存知のように、<a>要素または<img>. そのタグに移動したときに、それがカーソルに追従するようにしたかったのです。まさにこの通り。

Answer 1

jQuery UI のツールチップまたはQTip プラグインを見たいと思うかもしれません。

Answer 2

マウス トラッキング ツールチップの一部:マウス トラッキング

私はそれを試していませんが、それはいいようです:もう1つ

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;
}