javascript - 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/[email protected]/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/[email protected]/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>

question from:https://stackoverflow.com/questions/65858926/bootstrap-tooltip-bug-when-hovering-child-node

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/[email protected]/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/[email protected]/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>