JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<div class="example">
  <a href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-animation="false" data-bs-customClass="class-1" title="Where is my custom class?">
    Hover me
  </a>
</div>

CSS

.example {
  margin-top: 25px;
  text-align: center;
}
.example a {
  font-size: 28px;
}
.class-1 {
  background: red;
}

JavaScript

$(function() {
		$('[data-bs-toggle="tooltip"]').tooltip();	
});