JSFiddle - React, Tailwind, and code Playground

by Manikandan Kalaivanan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">
<div class="body">
  
  <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<button class="btn btn-secondary" data-toggle="tooltip" title="This is button.">Tooltip</button>


</div>

CSS

.body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

JavaScript

/* $(function() {


}) */

window.onload = function() {
    if (window.jQuery) {  
    $('[data-bs-toggle="tooltip"]').tooltip()
        // jQuery is loaded  
        //alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
}