Тосты и подсказки

Тост (toast) — короткое уведомление, которое всплывает в углу экрана и само исчезает через несколько секунд: «Задача сохранена», «Новый комментарий». Подсказка (tooltip) — маленький тёмный ярлык с текстом, который появляется при наведении на элемент. Оба компонента отличаются от прочих: атрибутов data-bs-* для них мало, их нужно запустить из JavaScript.

Тост

Разметка тоста — блок toast со шапкой toast-header и телом toast-body. Чтобы тосты стояли в углу окна, их кладут в контейнер toast-container position-fixed bottom-0 end-0 p-3:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div style="min-height: 180px">
  <button type="button" class="btn btn-primary" id="saveTask">Сохранить задачу</button>
</div>
 
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="savedToast" class="toast" role="status" aria-live="polite" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Tasko</strong>
      <small>только что</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
    </div>
    <div class="toast-body">Задача «Подготовить отчёт» сохранена.</div>
  </div>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const toast = bootstrap.Toast.getOrCreateInstance('#savedToast');
  document.querySelector('#saveTask').addEventListener('click', () => toast.show());
</script>

Нажмите кнопку — в правом нижнем углу превью появится уведомление и через 5 секунд пропадёт само. Метод getOrCreateInstance создаёт объект тоста или возвращает уже созданный, а show() показывает его.

Настройки передают атрибутами на блоке тоста: data-bs-delay="3000" меняет время показа, data-bs-autohide="false" оставляет тост до щелчка по крестику.

Подсказка

Элементу добавляют data-bs-toggle="tooltip" и текст в data-bs-title. Подсказки Bootstrap не запускает сам — ради скорости страницы, — поэтому после загрузки скрипта нужно пройтись по таким элементам и создать для каждого объект Tooltip:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="d-flex gap-2 pt-5 pb-3">
  <button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-title="Архивировать проект">
    Архив
  </button>
  <button type="button" class="btn btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Удалить без возможности восстановления">
    Удалить
  </button>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
    .forEach((element) => new bootstrap.Tooltip(element));
</script>

Наведите курсор на «Архив» — над кнопкой появится тёмный ярлык. У второй кнопки он справа: сторону задаёт data-bs-placement со значениями top, bottom, left и right. Подсказка появляется и при фокусе с клавиатуры.

Всплывающее окно

Похожий компонент popover — подсказка побольше, с заголовком и текстом, которая открывается по щелчку. Атрибуты те же, но data-bs-toggle="popover", текст в data-bs-content, а запускается он через new bootstrap.Popover(element).

Частая ошибка

Расставить data-bs-toggle="tooltip", не написать код запуска и решить, что подсказки сломаны. Без строки с new bootstrap.Tooltip ничего не появится, и ошибки в консоли не будет. С тостами то же самое: без show() из JavaScript тост не покажется.