悬停子节点时的引导工具提示错误

2024-05-20 • 问答

我有一堆这样构建的元素：

$(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>

所以当我悬停一个 tootlip 目标时，它会很好地显示工具提示。问题是当我悬停该工具提示元素的任何子元素时。

元素突然消失或重新定位在视图的左上角，破坏了这个 Bootstrap 组件的整个行为。无论是图标还是简单的跨度节点。

有关如何解决此问题的任何想法？

您需要将 bootstrap bundle CDN 替换为 alpha3，并按照 JS Bootstrap 5 代码替换 Tooltip 代码。

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>

悬停子节点时的引导工具提示错误

gary1968 回答：悬停子节点时的引导工具提示错误

大家都在问