CSS transitions optimization guide as expected on Bootstrap 5 tooltip
I just started working with I've tried everything I can think of but I'm not sure how to approach I'm trying to implement a transition effect on a Bootstrap 5 tooltip, but it seems like the transition is not being triggered when the tooltip is shown. I am using the `fade` class provided by Bootstrap, but the tooltip just appears instantly without any transition. Here’s the relevant HTML and JavaScript code: ```html <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip text!"> Tooltip Button </button> ``` ```javascript const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); ``` I also added some custom CSS for the transition: ```css .tooltip { transition: opacity 0.5s ease-in-out; } ``` However, the tooltip appears immediately without the fade effect. I’ve checked and the Bootstrap JavaScript and CSS files are properly linked in my project. I tried to use `fade` class in my tooltip initialization as well, but it doesn’t seem to change anything. Am I missing something or is there a specific way to make Bootstrap tooltips transition smoothly? Any help would be greatly appreciated! For context: I'm using Javascript on Ubuntu 20.04. What are your experiences with this? I'm developing on Ubuntu 20.04 with Javascript.