问题描述
我有一堆这样构建的元素:
$(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>