Bootstrap 5

by TheNerdy97

HTML

<!-- jQuery JS -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Datatables plugin-->
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
    
<div class="text-center">
  <h4 class="list-inline-item">Filter By:</h4>
    <div class="btn-group" role="group" aria-label="Basic outlined example">
      <a class="btn btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#filterNewest" role="button" aria-expanded="false" aria-controls="collapseExample">Newest</a>
      <a class="btn btn-outline-warning" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Tooltip<br> on right" data-bs-target="#filterTop" role="button" aria-expanded="false" aria-controls="collapseExample">Top</a>
      <a class="btn btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#filterTYBW" role="button" aria-expanded="false" aria-controls="collapseExample">TYBW</a>
      <a class="btn btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#filterCFYOW" role="button" aria-expanded="false" aria-controls="collapseExample">CFYOW</a>
      <a class="btn btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#filterSAFWY" role="button" aria-expanded="false" aria-controls="collapseExample">SAFWY</a>
      <a class="btn btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#filterBTW" role="button" aria-expanded="false" aria-controls="collapseExample">BTW</a>
      <a class="btn btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#filterAnniversary" role="button" aria-expanded="false"...

CSS

.tooltip .arrow:before {
    border-top-color: #008ec3 !important;
}

.tooltip .tooltip-inner {
    background-color: white;
    border: 1px solid black;
    color: black;
    font-weight: bold;
}

JavaScript

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})