Bootstrap 3 Popover: отображение при наведении и на клик, ака. Привязать Popover

Создание popover с триггером зависания отлично работает.

Создание всплывающего окна с помощью click работает нормально.

Теперь, как я могу заставить popover появляться, когда запускающее изображение зависнет, но если пользователь нажимает на изображение, отмените наведение и инициируйте переключение на клик? Другими словами, зависание показывает popover и щелкает "штырьками" popover.

HTML довольно стандартный:

<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>

И инициализация popover, еще более скучная:

$(function () { 
    $("[rel=popover]").popover();   
});

Из того, что я видел до сих пор, кажется вероятным, что решение является хорошим сложным набором вызовов popover('show'), popover('hide') и popover('toggle'), но мой javascript/jQuery-foo не соответствует задаче.

EDIT:

Используя код, предоставленный @hajpoj в качестве базы, я добавил функцию, чтобы прослушать событие hidden.bs.popover, чтобы попытаться повторно активировать события mouseenter и mouseleave после запуска события click, но хотя это и делает "hover" снова, он убивает клик...

var $btn2 = $('#btn2');

    var enterShow = function() {
        $btn2.popover('show');
    };

    var exitHide = function() {
        $btn2.popover('hide');
    }

    $btn2.popover({trigger: 'manual'})
            .on('mouseenter', enterShow)
            .on('mouseleave', exitHide)
            .one('click', function() {
                   $btn2.off('mouseenter', enterShow)
                        .off('mouseleave', exitHide)
                        .on('click', function() {
                            $btn2.popover('toggle');
                        });
            });

$('#btn2').on('hidden.bs.popover', function () {
  $btn2.on('mouseenter', enterShow)
       .on('mouseleave', exitHide)
});

Ответы

Ответ 1

Edit:

Получает обновленные решения, основанные на ваших комментариях. Он не остается в состоянии 'click', но возвращается в состояние зависания.

jsfiddle: http://jsfiddle.net/hajpoj/JJQS9/15/

HTML:

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here some amazing content. It very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

JS:

var $btn2 = $('#btn2');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};
var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

Старый:

Я считаю, что это то, что вы ищете:

http://jsfiddle.net/JJQS9/1/

HTML:

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here some amazing content. It very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

JS:

var $btn2 = $('#btn2');

var enterShow = function() {
    $btn2.popover('show');
};

var exitHide = function() {
    $btn2.popover('hide');
}

$btn2.popover({trigger: 'manual'})
        .on('mouseenter', enterShow)
        .on('mouseleave', exitHide)
        .one('click', function() {
            $btn2.off('mouseenter', enterShow)
                    .off('mouseleave', exitHide)
                    .on('click', function() {
                        $btn2.popover('toggle');
                    });
        });

В основном вы вручную открываете/закрываете popover в событиях mouseenter и mouseleave, но как только кто-то нажимает на popover в первый раз, вы удаляете эти обработчики событий и добавляете новый обработчик на click событие, которое переключает popover.

Edit: альтернативный js-код. более простой код, но при его использовании есть небольшой визуальный снимок: http://jsfiddle.net/hajpoj/r3Ckt/1/

var $btn2 = $('#btn2');

$btn2.popover({trigger: 'hover'})
    .one('click', function() {
        $btn2.popover('destroy')
            .popover({ trigger: 'click'})
            .popover('show');
    });

Ответ 2

Здесь представлен гибридный popover/tooltip, который может дать вам функциональность, которую вы ищете для обоих параметров, переключается на клик и наведение):

Гибридная скрипка/всплывающая подсказка

HTML:

<button id="tip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title='this text!'>What hidden?</button>

JS:

var $tip1 = $('#tip1');

$tip1.tooltip({trigger: 'hover'})
  .on('click', function() {
    $tip1.tooltip('toggle');
});

Ответ 3

Очень просто, добавьте hover в data-trigger следующим образом:

<span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>

Ответ 4

Здесь, как я выполнил функцию hover/pin, используя Bootstrap и JQuery:

$(function () {
    var clicked = false;

    var onLeave = function() {
        if (!clicked) { $(this).popover('hide'); }
    };

    var onEnter = function () {
        if (!clicked) { $(this).popover('show'); }
    };

    var clickToggle = function() {
        if (clicked) { $(this).popover('hide'); }
        clicked = !clicked;
    }
    $('.popover-div-class').popover({ trigger: "manual"})
        .on('mouseenter', onEnter)
        .on('mouseleave', onLeave)
        .on('click', clickToggle);
});

Я не уверен, что он будет работать во всех сценариях, но он работал на моем. Большой крик для @hajpoj и @Trevor для вдохновения.

JSFiddle: https://jsfiddle.net/5m2ob3yf/ (пока не работает, но вы можете получить суть).