Bootstrap tooltip bug when hovering child node

Question

I have a bunch of elements builded in this way:

 $(document).ready(()=>{ $('body').tooltip({ selector: '.hasTooltip', trigger: "hover" }); })

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" /> <button type="button" class="btn btn-primary px-3 hasTooltip" title="Tooltip text" data-toggle="tooltip"> <i class="fas fa-user m-0"></i> </button> <button type="button" class="btn btn-primary px-3 hasTooltip" title="Other tooltip text" data-toggle="tooltip"> <span>Any child element</span> </button>

So when I hover a tootlip target it shows the tooltip nicely. The problem is when I hover any child element of that tooltip element.

The element suddenly dissapears or is being repositioned at the top left corner of the view, breaking the entire behaviour of this Bootstrap component. No matters if it is an icon or a simply span node.

Any ideas on how to fix this issue?

Answer 1

You need to replace the bootstrap bundle CDN with alpha3 and replace JS code as per Bootstrap 5 Tooltip code.

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

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" /> <button type="button" class="btn btn-primary px-3 hasTooltip" title="Tooltip text" data-toggle="tooltip"> <i class="fas fa-user m-0"></i> </button> <button type="button" class="btn btn-primary px-3 hasTooltip" title="Other tooltip text" data-toggle="tooltip"> <span>Any child element</span> </button>