bootstrap-5twitter-bootstrap-tooltip

Tooltip only showing in top in Bootstrap 5

Hi I'm working in Laravel 7 with the Currently v5.1.3 Bootstrap... I'm using the bootstrap.bunble.min.js file. Calling the tooltip function via the data-bs-toggle attribute:

    <span class="badge-sale"
    data-bs-toggle="tooltip"
    title="Ends in 3 hours from now">
    Sale!</span>

and the initializator of tooltip in my js file:

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

ONLY in the top of the web tooltip is displayed correctly but when I scroll further down it is no longer displayed.

enter image description here

Solution

  • Bootstrap's .container-fluid class has been used, so this is passed as a container parameter when initialising Tooltip, modifying it would look like this:

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