JSFiddle - React, Tailwind, and code Playground

by nwalters512

HTML

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<div class="icon-spacer">
<a href="#" data-bs-toggle="tooltip" data-bs-title="Warning: Course end date is earlier than center end date (2023-08-28 22:13:02 (CDT))"><i class="bi bi-exclamation-triangle-fill text-warning"></i></a>
</div>

CSS

.icon-spacer {
  padding-top: 150px;
  padding-left: 150px;
}

JavaScript

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => {
  new window.bootstrap.Tooltip(el);
})