Toasts and tooltips

A toast is a short notification that pops up in a corner of the screen and disappears by itself after a few seconds: "Task saved", "New comment". A tooltip is a small dark label with text that appears when you hover over an element. Both differ from the other components: data-bs-* attributes are not enough, they have to be started from JavaScript.

A toast

A toast's markup is a toast block with a toast-header and a toast-body. To keep toasts in the corner of the window, put them into a toast-container position-fixed bottom-0 end-0 p-3 container:

<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">Save task</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>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">The task "Prepare the report" was saved.</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>

Click the button and a notification appears in the bottom right corner of the preview and disappears after 5 seconds. getOrCreateInstance creates the toast object or returns the one already created, and show() displays it.

Settings are passed as attributes on the toast block: data-bs-delay="3000" changes how long it stays, data-bs-autohide="false" keeps the toast until the cross is clicked.

A tooltip

An element gets data-bs-toggle="tooltip" and text in data-bs-title. Bootstrap does not start tooltips by itself — for page speed — so after the script loads you go through such elements and create a Tooltip object for each:

<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="Archive the project">
    Archive
  </button>
  <button type="button" class="btn btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Delete permanently">
    Delete
  </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>

Hover over "Archive" and a dark label appears above the button. For the second button it is on the right: the side is set by data-bs-placement with the values top, bottom, left and right. The tooltip also appears on keyboard focus.

Popover

A similar component, the popover, is a bigger hint with a title and text that opens on click. The attributes are the same, but with data-bs-toggle="popover", the text in data-bs-content, and it is started with new bootstrap.Popover(element).

Common mistake

Adding data-bs-toggle="tooltip", not writing the startup code and deciding tooltips are broken. Without the new bootstrap.Tooltip line nothing appears, and there is no error in the console. The same goes for toasts: without show() from JavaScript a toast is never displayed.