[英]Popper.js not working if bootstrap CSS is imported?
我遇到了一個非常不尋常的問題,如果我使用 Bootstrap CSS,Popper.js 和 Tooltip.js 將拒絕工作。
這是我用來測試的代碼:
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
<span id="test-tooltip" data-tooltip="Testing tooltips!">Hover over me, I dare you.</span>
<script>
document.addEventListener('DOMContentLoaded', function() {
var referenceElement = document.getElementById("test-tooltip");
var instance = new Tooltip(referenceElement, {
title: referenceElement.getAttribute('data-tooltip'),
placement: "bottom",
});
});
</script>
還有一些 CSS,但它很長,所以我將把它放在底部。
如果我在任何地方包含 Bootstrap,整個事情就會停止工作。 懸停時根本不顯示任何內容。
<link rel="stylesheet" href="CSS/bootstrap.css">
我正在使用最新版本的引導程序,我什至也嘗試了一些舊版本。
這是用於設置工具提示樣式的 CSS:
.popper,
.tooltip {
position: absolute;
background: rgb(75, 75, 75);
color: white;
min-width: 80px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 12px;
text-align: center;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}
.tooltip .tooltip-arrow,
.popper .popper__arrow {
border-color: rgb(75, 75, 75);
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
margin-bottom: 6px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
margin-top: 6px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
margin-left: 6px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
margin-right: 6px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -6px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
有誰知道為什么會發生這種不尋常的事情? 我嘗試過的事情:
還有許多其他事情,我在試圖弄清楚這一點時都忘記了。
我已經閱讀了您的代碼並且它運行良好,問題僅在於 tooltip的不透明度。 添加此代碼以顯示您的工具提示
.tooltip[aria-hidden="false"]{
opacity:1;
}
鏈接到工作小提琴here
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.