Encountered a rather peculiar issue where Popper.js and Tooltip.js refuse to function properly when Bootstrap CSS is being utilized.
Here is the code snippet used for testing:
<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>
There's additional CSS involved, but it's quite lengthy, so I'll keep that towards the end.
If Bootstrap is included anywhere, the entire functionality ceases. No tooltips appear upon hovering.
<link rel="stylesheet" href="CSS/bootstrap.css">
The latest version of bootstrap was tried, along with a few older versions as well.
Below is the CSS responsible for styling the tooltips:
.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);
}
/* Remaining CSS properties omitted for brevity */
Any insights on why this unusual behavior might be occurring? Attempted solutions include:
- Removing all tooltip-related elements from bootstrap.css
- Importing bootstrap before/after Popper.js in the code
- Incorporating custom CSS into bootstrap.css
Various other troubleshooting steps were undertaken, although specifics have slipped my mind amidst trying to resolve this issue.