[Solved]: Bootstrap tooltips not working
A Bootstrap tooltip is a small pop-up box that appears when a user hovers the mouse pointer over a certain element on a webpage.
It typically contains additional information or a description of the element on which it shows.
As a web developer, sometimes you may encounter problems where tooltips don't show or work as expected.
This article will cover the common causes of Bootstrap tooltips not working and how you can fix the issue.
Possible causes and solutions
Below are possible causes for Bootstrap tooltips not working and their solutions:
Missing Bootstrap or jQuery files
Bootstrap tooltips require both Bootstrap JS and CSS files, and jQuery to work and display correctly. If any is missing, the tooltips won't work as expected.
Check and make sure that you have included these files and that they are loading correctly.
Missing or incorrect tooltip initialization
This is the most common cause of Bootstrap tooltips not working. To display tooltips, you must initialize them using the tooltip() function in JavaScript.
This function can be called on a specific element or on all elements you want to have a tooltip on the page.
When calling the tooltip function on a specific element, you can use its class name, ID, or element name as in the example below:
<button class="btn btn-success" id="mybtn" data-toggle="tooltip" data-placement="right" title="Sample tooltip text">Hover Me!</button>
<script>
$(function() {
$('#mybtn').tooltip();
});
</script>
This example initializes the tooltip for the HTML element whose ID value is "mybtn".
The common way of initializing all tooltips on a page is by selecting them by the 'data-toggle' attribute.
<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Sample tooltip text">Hover Me!</button>
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
The above code initializes tooltips for all the elements with an attribute "data-toggle", whose value is "tooltip". It's the most appropriate method when you want to have tooltips on multiple elements.
You can alternatively initiate all tooltips on the page as below:
<script>
$(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
</script>
Another way to initiate all tooltips on the page is by using the "title" attribute as in the example below:
<script>
$(function() {
$('[title]').tooltip();
});
</script>
It is important to note that Bootstrap v5 replaced "data-toggle" with "data-bs-toggle", "data-placement" with "data-bs-placement", and "title" with "data-bs-title". Therefore, make sure to use the respective attribute depending on the Bootstrap version of your project.
Bootstrap 5 example
<button class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Sample tooltip text">Hover Me!</button>
<script>
$(function() {
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
However, the "title" attribute can still be used in Bootstrap v5. When is used, Popper will replace it automatically with "data-bs-title" when the element is rendered.
If for some reason you do not intend to use jQuery in your project, you can initialize the tooltip(s) in Vanilla JS using the code below.
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
</script>
Remember to replace it with the relevant attribute if you are not using Bootstrap 5.
Overlapping Elements
Another possible cause for the tooltip not showing is if the tooltip's target element is overlapping with another element on the page.
Check and ensure that there is enough space around your tooltip's target element for it to display the tooltip correctly. You may also adjust the placement of the tooltip using the "data-placement" or "data-bs-placement" attribute of the element. Alternatively, you can change the placement within the tooltip() function as in the example below.
<script>
$(function() {
$('[data-bs-toggle="tooltip"]').tooltip({placement: 'bottom'});
});
</script>
Conclusion
Bootstrap tooltips are an important feature for displaying additional information to users when they hover the mouse pointer over an element. However, it's common for developers to encounter scenarios where tooltips fail to work correctly.
In this article, we have covered the common causes of why they may fail to work and explored their solutions. It's my hope that it helps you fix the issue in your project.
