In my project, I am using Bootstrap5, ClipboardJS, JQuery, and Tooltipster.
Despite following the initial instructions on the Tooltipster website closely, I am unable to determine what I missed. Here are the two sections, one for the JavaScript scripts and the other for one of the components (buttons) where a tooltip should appear after clicking:
<!-- (Right before </body>) -->
<!-- ClipboardJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
var btns = document.querySelectorAll('.btn');
var clipboard = new ClipboardJS(btns);
</script>
<!-- Tooltipster -->
<script type="text/javascript" src="tooltipster.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').tooltipster({
trigger: 'click'
});
});
</script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button class="btn btn-outline-dark rounded ms-2" title="Copied! 🙌" type="button" data-clipboard-target="#email">
Copy
</button>
Any assistance would be greatly appreciated.