bootstrap 3 автоматическое исчезновение popover

В Bootstrap 3 для реализации автоматического исчезновения popover можно использовать комбинацию событий и методов, предоставляемых библиотекой. Вот пошаговое руководство, как это сделать:

Инициализация Popover

Для начала убедитесь, что вы правильно инициализировали popover на элементе. Например:

<button type="button" class="btn btn-default" data-toggle="popover" title="Popover Title" data-content="This is the content of the popover.">
  Click me
</button>

$(document).ready(function () {
  $('[data-toggle="popover"]').popover();
});

Добавление задержки перед исчезновением

Чтобы popover автоматически исчезал через определенное время, можно использовать метод setTimeout. Например:

$(document).ready(function () {
  // Инициализация popover
  $('[data-toggle="popover"]').popover();

  // Добавление обработчика события при показе popover
  $('[data-toggle="popover"]').on('shown.bs.popover', function () {
    var $this = $(this);

    // Установка таймера на закрытие popover через 3 секунды
    setTimeout(function () {
      $this.popover('hide'); // Скрываем popover
    }, 3000); // 3000 мс = 3 секунды
  });
});

Объяснение кода

shown.bs.popover: Это событие срабатывает, когда popover полностью отображается. Мы используем его для запуска таймера.
setTimeout: Функция JavaScript, которая выполняет действие (в данном случае скрытие popover) через указанное количество миллисекунд.
$this.popover('hide'): Метод Bootstrap для скрытия popover.

Опционально: Отключение popover при клике вне элемента

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

$(document).on('click', function (e) {
  // Если клик был вне элемента с popover
  if (!$(e.target).closest('[data-toggle="popover"]').length) {
    $('[data-toggle="popover"]').popover('hide');
  }
});

Этот код проверяет, был ли клик за пределами элемента с popover, и, если да, скрывает его.

Полный пример

Вот полный рабочий пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Popover Auto Hide</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container" style="margin-top: 50px;">
    <button type="button" class="btn btn-default" data-toggle="popover" title="Popover Title" data-content="This popover will disappear after 3 seconds.">
      Click me
    </button>
  </div>

  <script>
    $(document).ready(function () {
      // Инициализация popover
      $('[data-toggle="popover"]').popover();

      // Автоматическое исчезновение через 3 секунды
      $('[data-toggle="popover"]').on('shown.bs.popover', function () {
        var $this = $(this);
        setTimeout(function () {
          $this.popover('hide');
        }, 3000);
      });

      // Скрытие popover при клике вне элемента
      $(document).on('click', function (e) {
        if (!$(e.target).closest('[data-toggle="popover"]').length) {
          $('[data-toggle="popover"]').popover('hide');
        }
      });
    });
  </script>
</body>
</html>

Настройка времени исчезновения

Вы можете изменить время исчезновения, изменив значение в setTimeout. Например:

2000 — 2 секунды.
5000 — 5 секунд.

Заключение

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

Если у вас есть дополнительные вопросы или требуется помощь, дайте знать!

Share this content: