Нажатие переключает всплывающую подсказку на сгенерированный элемент метки

Question

Нажатие переключает всплывающую подсказку на сгенерированный элемент метки

0

У меня есть HTML, который генерируется динамически:

<label class="passiveText smallText" title="Name: Smith, John , Occupation Code: BA81, Occupation 
Description: BUSINESS SYSTEMS M" rel="tooltip" style="margin-top:10px; width:80%; text-decoration:underline; 
color:#009245;" containeridx="0" id="lblBadge_7022_0">7022</label>

Теперь у меня есть функция jQuery, которая при нажатии появляется всплывающая подсказка:

$( function()
{
    var targets = $( '[rel~=tooltip]' ),
        target  = false,
        tooltip = false,
        title   = false;
    targets.bind( 'click', function()
    {
    target  = $( this );
    tip = target.attr('title');
    tooltip = $( '<div id="tooltip"></div>' );

    if( !tip || tip == '' )
        return false;

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

    var init_tooltip = function()
    {
        if( $( window ).width() < tooltip.outerWidth() * 1.5 )
            tooltip.css( 'max-width', $( window ).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 - tooltip.outerHeight() - 20;

        if( pos_left < 0 )
        {
            pos_left = target.offset().left + target.outerWidth() / 2 - 20;
            tooltip.addClass( 'left' );
        }
        else
            tooltip.removeClass( 'left' );

        if( pos_left + tooltip.outerWidth() > $( window ).width() )
        {
            pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
            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 );
    tooltip.bind( 'click', remove_tooltip );
});

});

То, что он не делает, - это то, что я хочу. То, что я хочу, - это когда всплывающая подсказка поднята, и она снова щелкнула. Я хочу, чтобы всплывающая подсказка исчезла.

Как я могу это достичь?

David Tunnell 20 фев. 2014, в 22:58

Источник

0

Возможно, вы захотите использовать .on() который делегирует обработку кликов по родительскому .on() селектору. Таким образом, вам не нужно отменять привязку, поскольку элементы, добавленные позже, также будут делегированы.
Tim Vermaelen 20 фев. 2014, в 21:36
0

Можете ли вы создать скрипку для этого?
j08691 20 фев. 2014, в 21:54
0

Похоже, ваш код работает так, как есть: jsfiddle.net/HSpyC Что, похоже, не работает?
Brent Keller 20 фев. 2014, в 21:54
0

Спасибо за создание скрипки Брент. Что не работает, так это то, что при нажатии появляется всплывающая подсказка, однако при повторном нажатии она не исчезает.
David Tunnell 20 фев. 2014, в 22:08

Показать ещё 2 комментария

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Возможно, вы захотите использовать .on() который делегирует обработку кликов по родительскому .on() селектору. Таким образом, вам не нужно отменять привязку, поскольку элементы, добавленные позже, также будут делегированы.
Можете ли вы создать скрипку для этого?
Похоже, ваш код работает так, как есть: jsfiddle.net/HSpyC Что, похоже, не работает?
Спасибо за создание скрипки Брент. Что не работает, так это то, что при нажатии появляется всплывающая подсказка, однако при повторном нажатии она не исчезает.

David Tunnell · Answer 1 · 2014-02-20T19-55-00.000Z

Вот мое решение, которое я понял:

$(function () {
    var targets = $('[rel~=tooltip]');

    targets.on('click', function () {
        var $this = $(this);
        var tooltip = $this.children('#tooltip');

        if (tooltip.length > 0) {
            tooltip.remove();

            return true;
        }

        tooltip = $('<div id="tooltip">');
        tooltip.text($this.attr('title'));

        var init_tooltip = function () {
            if ($(window).width() < tooltip.outerWidth() * 1.5)
                tooltip.css('max-width', $(window).width() / 2);
            else
                tooltip.css('max-width', 340);

            var pos_left = $this.offset().left + ($this.outerWidth() / 2) - (tooltip.outerWidth() / 2),
                            pos_top = $this.offset().top - tooltip.outerHeight() - 20;

            if (pos_left < 0) {
                pos_left = $this.offset().left + $this.outerWidth() / 2 - 20;
                tooltip.addClass('left');
            }
            else
                tooltip.removeClass('left');

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

            if (pos_top < 0) {
                var pos_top = $this.offset().top + $this.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);

        $this.append(tooltip);
    });
});