Автоматическое скрытие загрузки

Я хочу автоматически скрыть всплывающие окна Bootstrap через несколько секунд. Когда пользователь наводится над элементом управления, popover должен отображаться, но если пользователь не перемещает указатель мыши, этот popover должен быть скрыт автоматически через несколько секунд.

Это важно, потому что в мобильном телефоне или планшете, когда пользователь удаляет элемент управления, отображается popover, и фокус остается на одном и том же элементе управления, когда пользователь что-то набирает, при этом popover препятствует ему.

Ответ 1

Вам действительно нужно попробовать попробовать и опубликовать свой код, прежде чем обращаться за помощью. Это работает, хотя может быть более эффективный метод:

$('.pop').popover().click(function () {
    setTimeout(function () {
        $('.pop').popover('hide');
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<span class="pop" data-original-title="My popover" data-content="Isn't it great?">Click me</span>

Ответ 2

Принятый ответ работает просто отлично, но здесь более бутстрапный подход:

$('.pop').on('shown.bs.popover', function () {
    var $pop = $(this);
    setTimeout(function () {
        $pop.popover('hide');
    }, 2000);
});

Обновление от 陈诗锋

Устранена проблема необходимости двух щелчков, чтобы снова открыть ее.

 $('.pop').on('shown.bs.popover', function () {
    var $pop = $(this);
    setTimeout(function () {
        $pop.popover('hide');
    }, 2000);
    setTimeout(function () {
        $pop.popover();
    }, 2200);
});

Ответ 3

Вы также можете добавить свой собственный новый атрибут данных в свои popovers как таковые:

$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function() {
    this_popover = $(this);
    setTimeout(function () {
        this_popover.popover('hide');
    }, $(this).data("timeout"));
});

Теперь вы можете использовать

<span 
    data-toggle="popover" 
    data-timeout="2000" 
    title="A title" 
    data-content="Some explanatory text">
    Your text
</span>

и popover исчезнет после отображения количества миллисекунд, указанного вами в тайм-ауте данных.