javascript - Javascript ツールチップホバーアンドクリック

Question

JavaScript のツールチップについて助けが必要です。以下のコードはホバーでうまく機能しますが、関数を外部に配置できないため、クリックで呼び出すことができます。関数には、ツールチップの位置と表示方法を計算するためのものだけがあり、それが機能します。

ご助力ありがとうございます。

var targets = $( '[rel~=tooltip]' ),
    target  = false,
    tooltip = false,
    title   = false;

targets.on( 'mouseenter', function()
{
    target  = $( this );
    tip     = target.attr( 'title' );
    tooltip = $( '<div id="tooltip"></div>' );



    if( !tip ) {
        return false;
    }

    target.removeAttr( 'title' );
    tooltip.css( 'opacity', 0 )
           .html( tip )
           .appendTo( 'body' );

    var init_tooltip = function()
    {
        containerList = $('.container').find('.listImages');

        if( containerList.width() < tooltip.outerWidth() * 1.5 )
            tooltip.css( 'max-width', containerList.width() / 2);
        else
            tooltip.css( 'max-width', 340 );

        var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
            pos_top  = target.offset().top + target.outerHeight(),
            pos_right = target.offset().right + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 );

            console.log(pos_right)

        if( pos_left < containerList.offset().left )
        {
            pos_left = target.offset().left;
            tooltip.addClass( 'left' );
        }
        else {
            tooltip.removeClass( 'left' );
        }

        if( pos_left + tooltip.outerWidth() > containerList.offset().left + containerList.width() )
        {
            pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth();
            tooltip.addClass( 'right' );
        }
        else {
            tooltip.removeClass( 'right' );
        }


        if( pos_top < 0 )
        {
            var pos_top  = target.offset().top + target.outerHeight();
            tooltip.addClass( 'top' );
        }
        else {
            tooltip.removeClass( 'top' );
        }

        tooltip.css( { left: pos_left, top: pos_top } )
               .animate( { top: '+=10', opacity: 1 }, 50 );
    };

    init_tooltip();
    $( window ).resize( init_tooltip );

    var remove_tooltip = function()
    {
        tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
        {
            $( this ).remove();
        });

        target.attr( 'title', tip );
    };



    target.bind( 'mouseleave', remove_tooltip );

});

score 0 · Accepted Answer

init_tooltip 関数を再利用する場合は、mouseenter イベントの外で宣言して、target と tooltip の 2 つのパラメーターを渡すことができます。

init_tooltip 関数の定義は次のようになります。

var init_tooltip = function(target, tooltip)

次に、mouseenter イベントでは、次のようになります。

init_tooltip(target, tooltip);
$( window ).resize( function () { init_tooltip(target, tooltip); } );

そうすれば、次のように、クリックイベントハンドラーにも使用できます。

targets.on('click', function () {
    tooltip = $( '<div id="tooltip"></div>' );
    init_tooltip($(this), tooltip);
});

クリックイベントでロジックを再現して、ツールヒントを表示するか非表示にするかを決定する必要がある場合があります。

score 0 · Accepted Answer

それが今のところできることですが、クリックとマウスリーブに再び問題があります。コードを改善しましたが、これは完璧ではありません。

$( "body" ).append( '<div id="tooltip"></div>' );

var activeTooltip = null,
    $tooltip = $('#tooltip'),
    $containerList = $('#content .listImages');

function Tooltip(el) {
    this.el = el;
    this.$el = $(el);
    this.text = this.$el.attr('data-content');

    this.create();
}

$.extend(Tooltip.prototype, {
    'create': function () {
        this.$el.removeAttr('data-content');

        $tooltip.css({
            'opacity': 0
        }).text(this.text);

        this.position();
    },
        'position': function () {
        var conWidth = $containerList.width(),
            conOffset = $containerList.offset(),
            toolWidth = $tooltip.outerWidth();

        if (conWidth < $tooltip.outerWidth() * 1.5) {
            $tooltip.css('max-width', conWidth / 2);
        } else {
            $tooltip.css('max-width', 340);
        }

        var elOffset = this.$el.offset(),
            elWidth = this.$el.outerWidth(),
            elHeight = this.$el.outerHeight(),
            pos_left = elOffset.left + (elWidth / 2) - (toolWidth / 2),
            pos_top = elOffset.top + elHeight;

        if (this.$el.offset().left + (elWidth / 2) - ($tooltip.outerWidth() / 2) < conOffset.left) {
            pos_left = this.$el.offset().left;

            $tooltip.addClass('left');
        } else {
            $tooltip.removeClass('left');
        }

        if (elOffset.left + (this.$el.outerWidth() / 2) - ($tooltip.outerWidth() / 2) + $tooltip.outerWidth() > $containerList.offset().left + $containerList.width()) {
            pos_left = this.$el.offset().left - $tooltip.outerWidth() + this.$el.outerWidth();
            $tooltip.addClass('right');
        } else {
            $tooltip.removeClass('right');
        }

        if (elOffset.top + this.$el.outerHeight() < 0) {
            pos_top = elOffset.top + this.$el.outerHeight();

            $tooltip.addClass('top');
        } else {
            $tooltip.removeClass('top');
        }

        $tooltip.css({
            'left': pos_left,
            'top': pos_top
        })
            .animate({
            'top': '+=10',
            'opacity': 1
        }, 50);
    },
        'destroy': function () {
        $tooltip.animate({
            'top': '-=10',
            'opacity': 0
        }, 50);

        this.$el.attr('data-content', this.text);

        activeTooltip = null;
    }
});

var savelastTooltip, activeSaveTooltip = false;

$('[rel~=tooltip][data-content]').on({
    'tooltip.create': function () {
        $(this).trigger('tooltip.destroy');
        activeTooltip = new Tooltip(this);
    },
    'tooltip.destroy': function () {
        if (activeTooltip) {
            activeTooltip.destroy();
        }
    },
    'mouseenter': function () {
        $(this).trigger('tooltip.create');
    },
    'mouseleave': function () {
        $(this).trigger('tooltip.destroy');
        if(true === activeSaveTooltip)
        { 
            activeTooltip = new Tooltip(savelastTooltip);
        }
    },
    'click': function (e) {
       e.stopPropagation();
       activeSaveTooltip = true;
       savelastTooltip = this;

        if (activeTooltip && activeTooltip.el != this) {
            $(this).trigger('tooltip.destroy');
        } else if(activeTooltip && activeTooltip.el == this) {
            $(this).off('mouseleave');
        } else {
            $(this).trigger('tooltip.create');
        }
    }
});

$(window).on('resize', function () {
    if (activeTooltip) {
        activeTooltip.position();
    }
});

javascript - Javascript ツールチップ ホバー アンド クリック

3 に答える 3

Related

Reference

javascript - Javascript ツールチップホバーアンドクリック