1

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

});
4

3 に答える 3

0

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

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

于 2013-08-23T21:23:52.023 に答える
0

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

$( "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();
    }
});
于 2013-08-24T20:43:16.607 に答える